[CSS] Grid 파헤쳐 보자🐱‍👤

🔥Grid CSS

2차원( 행과 열 )의 레이아웃 시스템을 제공

😎속성들

🔸 gap

gap: 25px; 이런식으로 할 수 있음

🔸 grid-template-columns
🔸 grid-template-rows

공백으로 구분된 값 목록으로 그리드의 열과 행을 정의
값은 트랙 크기를 나타내고 그 사이의 공간은 grid line 격자선을 나타냄

🔸 repeat

5개의 아이템에 각각 10px 준다는 뜻

🔸 1fr

fr = fraction
1fr➡사용 가능한 공간의 1 부분임( 사용 가능한 공간에 대한 비율 )

다 채우는데 똑같이 주고 싶을 때 사용( 5번 반복 )

이렇게 해도 됨

🔸 grid-column-start
🔸 grid-column-end
🔸 grid-row-start
🔸 grid-row-end

하나의 row에 3개의 column을 주고 싶으면👉grid-template-columns
auto auto auto 주면 알아서 가져가는 것

근데 지금 원하는건 item1이 2칸 차지하는 걸 원하는 거임

grid-column-start 어디서 시작하고 grid-column-end 어디서 끝낼지
👉 해당하는 item1 클래스에 grid-column-start: 1; grid-column-end: 3; 주면 됨

간결하게 이렇게 써도 됨😯

총 12개니까 grid-container 안에 12개의 item을 만들기

.grid-container>div : grid-container 안에 있는 모든 div한테 적용시킬것

사이 간격 gap 10px 주기( column & row 둘 다 적용 된 것 )

위 코드처럼 쓰면 ...까지 5개니까 첫째 줄에 5개 둘째 줄에 5개로 정렬 됨
이름은 맘대로 작명하면 됨✔

이름 주는 이유 : 이부분을 어떠한 item이 이 공간을 차지하게 만들건지 정해줘야함

1, 2, 6, 7이 1 부분이 4칸을 차지해야하기에 그부분을 myArea로 지정해준 것⚡

이렇게 하면 4칸을 차지할 수 있게 됨🤓

여기서 row가 3줄 나와야하니까 grid-template-areas 이용해서 3줄 만들어주기

그리고 첫번째 줄엔 header가 한줄에 다 차지하니까 header를 X6 쓰기
두번째 줄은 menu 하나, main X3, right X2
세번째 줄은 menu 하나, footer X5

grid-area 써서 grid-template-areas에서 지정해준 이름을
각각 해당하는 이름으로 써주면 됨😎

Grid Autofill 🤜💥🤛 Autofit

auto-fill & auto-fit➡repeat( ) 함수와 함께 사용됨🙆‍♀️

🔸auto-fit➡컨테이너의 너비가 커질 때 각각의 셀들이 커지면서 공간을 나눠갖게 됨
🔸auto-fill➡보이지 않는 셀을 만들면서 빈 공간을 채우며 셀의 길이는 늘리지 않음

어느정도 사이즈까진 이 둘이 같음

화면을 크게 하면 auto-fill은 이렇게 하나씩 채워가는 것
auto-fit은 사이즈를 키워가지고 맞추는 것