Grid

그리드는 flex와 마찬가지로 container와 item 두 가지로 구분되어 있다.
container는 item들을 감싸는 부모 요소이고 그 안에서 각 아이템들을 배치할 수 있다.

먼저, container가 가질 수 있는 속성에 대해서 알아보자.

{display: grid}
아이템들을 배치하려면 부모 컨테이너에 {display: grid} 속성을 적어줘야 한다.
{display: inline-grid;}inline-grid 속성값도 존재하는데, inline 속성의 그리드 컨테이너를 만들 수 있다.

{grid-template: xxx;}
grid-template은 세가지 개별 속성을 단축할 수 있는 단축 속성이다.

grid-template-rows: 가로줄의 크기를 명시적으로 정의한다.(행의 크기)

grid-template-rows: 100px 100px 100px;  
grid-template-rows: repeat(반복할 숫자, 간격);  
grid-template-rows: 1fr 1fr 1fr 1fr; => 가로 줄을 네개 만들 건데 네개 모두 같은 너비로 작성  
grid-template-rows: [first] 100px [second] 200px [third] =>줄의 이름도 명시해줄 수 있다. 그러나 잘 사용하진 않음

grid-template-columns: 세로줄의 크기를 명시적으로 정의한다. (열의 크기)

grid-template-columns: 100px 100px 100px;
grid-template-columns: repeat(반복할 숫자, 간격);
grid-template-colums: 1fr 1fr 1fr 1fr; => 가로 줄을 네개 만들 건데 네개 모두 같은 너비로 작성
grid-template-columns: [first] 100px [second] 200px [third] =>줄의 이름도 명시해줄 수 있다. 그러나 잘 사용하진 않음

grid-template-areas: 영역 이름을 참조해 템플릿을 형성한다.

grid-template-areas:{ "header header header"
                  "main   .      ."
                  "main   .      aside"
                  "footer footer footer";
                  }
header{grid-area: header;}
main{grid-area: main;}
aside{grid-area: aside;}
footer{grid-area: footer;}

여기서, grid-area는 grid-template-areas에서 사용할 이름을 부여해주는 역할도 하지만, 단축속성의 역할도 한다.
어떤 단축속성?

header {grid-area: <grid-row-start>/<grid-column-start>/<grid-row-end>/<grid-column-end>;} 
header {grid-area: 1/2/3/4;}

이제 이 세가지를 어떻게 단축하여 작성하는지 알아보자.

grid-template: <grid-template-rows>/<grid-template-columns;>
grid-template: <grid-template-areas>;

이렇게 간단하게 단축해서 사용할 수 있다.
또 응용해서 작성하는 방법도 있다.

grid-template: [1행 시작선 이름] "area" 간격(px,fr) [1행 끝선 이름]
               [2행 시작선 이름] "area" 간격(px,fr) [2행 끝선 이름]
               /<grid-template-columns>;

1),2),3) 세 가지 모두 한번에 단축하는 방법도 있다.

grid-template: "header header header" 80px
               "main   main   ." 350px
               "footer footer footer" 240px
               /2fr 100px 1fr;
header {grid-area: header;}
main {grid-area: main;}
footer {grid-area: footer;}

위의 예제를 해석하면

grid-template-rows: 80px 350px 240px;
grid-template-columns: 2fr 100px 1fr;
grid-template-areas: "header header header"
                     "main   main   ."
                     "footer footer footer";

+++++++
그리드 줄 높이를 설정할때, 숫자(px), fr 말고도 사용할 수 있는 값이 있다.
바로 auto이다.
줄 높이를 auto로 설정하면 해당 줄은 컨텐츠 높이만큼 줄높이를 갖는다. 또, 암시적인 줄을 생성해준다.
그러니까, grid-template-rows: auto;이면, 각 줄은 컨텐츠 크기만큼의 높이를 갖고, 줄 개수가 작성해주는 만큼 자동으로 늘어난다.

{gap: xpx ypx;} 단축속성

가로줄 사이, 세로줄 사이의 간격을 지정한다.

gap: <row-gap> <column-gap>;

grid-gap이라고 혼동해서 사용할 수 있는데 “grid-“ 접두사는 더이상 사용하지 않는다.
하지만, 일부 브라우저 지원을 위해 사용할 수도 있다.

{grid-auto-xxx}(단축속성 아님)

grid-auto-rows: 명시적으로 작성한 행 외부에 배치되는 경우, 암시적 행의 크기가 적용된다. 쉽게 풀어 설명하자면, 내가 작성한 그리드 열 바깥으로 셀이 추가될 경우, grid-auto-rows로 작성해준 크기를 따른다.
```
grid-auto-rows: 100px;
```
grid-auto-columns: 열의 경우도 행과 같다.
```
grid-auto-columns: 100px;
```
grid-auto-flow: 배치하지 않은 아이템을 어떤 방식으로 처리할지 정의한다.
grid-auto-flow: row
배치하지 않은 아이템들을 자동으로 가로로 배열해준다.
grid-auto-flow: row dense(혹은 그냥 dense)
가로로 배열되는데, 비어있는 영역이 있다면 채워지면서 배열된다.
grid-auto-flow: column
배치하지 않은 아이템들을 자동으로 세로로 배열해준다.
grid-auto-flow: column dense
세로로 배열되는데, 비어있는 영역이 있다면 채워지면서 배열된다.

grid 단축속성

grid는 grid-template-xxx과 grid-auto-xxx의 단축속성이다.
헷갈리는 단축속성이니 집중해서 살펴보자.

.container {
   grid: <grid-template>;
   grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
   grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}

grid 단축속성으로 쓸 수 있는 경우들이다.

.container {
   grid: <grid-template-rows> / <grid-template-columns>;
}
.container {
   grid: 100px 200px / 1fr 2fr; 
}
.container {
   grid-template-rows: 100px 200px;
   grid-template-columns: 1fr 2fr;
}

세 가지 모두 같은 뜻이다. grid-template-rows와 grid-template-columns를 단축속성으로 사용한다면 grid-template과 grid 속성 두가지가 있다. 물론 각각 선언해줘도 가능하다.

.container {
   grid: <grid-template>;
}
.container {
   grid : "header header header" 80px
          "main   main   ." 350px
          "footer footer footer" 240px
          /2fr 100px 1fr;
}
.container {
   grid-template: "header header header" 80px
               "main   main   ." 350px
               "footer footer footer" 240px
               /2fr 100px 1fr;
}

이 경우, grid-template은 grid로 대체해서 사용할 수 도 있다.
그러니까, 단축 속성이 헷갈릴때는 그냥 “grid”로 작성해주면 들어맞는다.

.container {
   grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-colums>;
}
.container {
   grid: 100px 100px / auto-flow 150px;
}
.container {
   grid-template-rows: 100px 100px;
   grid-auto-columns: 150px;
   grid-auto-flow: column;
}

여기서 이상한 점이 눈에 띈다. auto-flow 속성값이 row나 column이 아니라 auto-flow이다.
grid 단축 속성으로 사용할때, row / row dense / column /column dense를 입력해주는 것이 아니라, row를 주고싶을때는 슬래쉬를 기준으로 앞 부분에 “auto-flow”라고 입력해준다. row dense를 원한다면 슬래쉬 기준 앞부분에 “auto-flow dense”라고 한다.
column도 마찬가지로 슬래쉬 기준 뒤에 “auto-flow”라고 해준다.