GRID 사용이유
FLEX를 사용해서 격자(Grid)를 만들려면 요소들에 일일이 마진을 주는 등의 작업을 거쳐야함.
GRID 속성들
1. grid-template-rows, grid-template-columns
이 속성으로 grid의 형태와 가로 세로 폭을 정할 수 있다.
2. gap
grid 칸 사이의 간격을 지정한다. column-gap, row-gap으로 따로 지정할 수 있다.
3. grid-template-areas, grid-area
grid의 칸들을 지정해서 할당한다.
.parent {
display: grid;
grid-template-columns: repeat(4,200px);
grid-template-rows: 100px repeat(2,200px) 100px;
grid-template-areas:
"header header header header"
"content content content nav"
"content content content nav"
"footer footer footer footer";
}
.header{
background-color: red;
grid-area: header;
}
.content{
background-color: skyblue;
grid-area: content;
}
.nav{
background-color: pink;
grid-area: nav;
}
.footer{
background-color: brown;
grid-area: footer;
} 
4. gird-column, grid-row
3번과 같이 grid-template-area와 grid-area를 이용해 지정해줄 수도 있지만, 이속성을 이용해 직접 child element에 범위를 지정할 수도 있다.
.parent {
display: grid;
grid-template-columns: auto auto auto 200px;
grid-template-rows: 100px repeat(2,200px) 100px;
}
.header{
background-color: red;
grid-column: span 4;
}
.content{
background-color: skyblue;
grid-column: span 3;
grid-row:span 2;
}
.nav{
background-color: pink;
grid-row: span 2;
}
.footer{
background-color: brown;
grid-column:span 4;
} 3번과 같은 결과이다. grid-column:span 4;는 4칸을 차지하겠다는 뜻이고 위에서 header는 grid-column: 1/-1;로 해도 똑같다. 1번째 줄에서 시작해 뒤에서 1번째줄까지 차지하겠다는 뜻이다.
라인에 이름을 주고 설정할 수도 있다.
grid-template-columns: [first-line] 200px [second-line] 200px [third-line] 200px [fourth-line] 200px [fifth-line];
grid-column: first-line/fifth-line;
개인적으로는 span을 활용하는것이 편하다고 생각한다.
5. grid-template
grid-template-columns,grid-template-rows,grid-template-areas의 shortcut버전
.parent {
display: grid;
height: 50vh;
grid-template:
"header header header header" 1fr
"content contetn content nav" 2fr
"footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;
} 여기서 fr은 grid container가 가질 수 있는 최대한의 크기를 나눠서 가진다고 생각하면 된다. 각 줄 옆의 크기는 row의 크기(=높이)이고 마지막에 정의하는 크기들은 column의 크기(=넓이)이다.
grid를 정의할 때 가장 흔하게 쓰인다고 한다.
6.content,items
items는 각셀에 위치하는 element들을 어떻게 배치할지,
content는 grid가 어떻게 위치할지 정한다.
7. grid-auto-rows, grid-auto-columns, grid-auto-flow
기본적으로 grid에 child element가 늘어나면 row방향으로 배치하게된다.
그러다가 grid-template-rows로 정해놓은 것보다 row가 늘어날때 크기를 grid-auto-rows를 정의한다.
배치를 column순으로 되게 바꾸려면 grid-auto-flow:column으로 선언해주면 된다.
auto-fill, auto-fit
auto-fill은 빈 공간을 여분의 column으로 채운다.
auto-fit은 element를 쭉늘려서 최대한 row를 꽉채운다.
min-content, max-content
