[css] grid

 

grid 레이아웃은 2차원의 레이아웃 시스템을 제공하는 것으로 주요 페이지 영역을 설계하거나 작은 UI 요소를 배치하는 데 사용한다. flex와 다르게 grid는 겹치는 콘텐츠를 제어할 수 있다. 중첩의 우선 순위는 z-index 프로퍼티로 제어한다. 

grid 레이아웃을 사용할 때는 그리드 속성을 사용하고 싶은 컨테이너에 display: grid를 선언하여 사용한다. 컨테이너의 아이템들이 그리드 아이템이 된다.

 

👉여기서부터 grid container 속성

 

1) grid-template-rows, grid-template-columns: 행과 열의 크기나 이름을 정의한다. 같은 크기의 공간으로 나눌 경우 repeat 함수를 사용할 수 있다.

 

 

2) grid-template-areas: 나누어진 격자를 기준으로 영역을 지정하고 이름을 할당한다.

(컨테이너에 작성하지만 아이템에 적용되는 속성이라 할 수 있다.)

 

★ gird-template: 1)2)의 단축 속성. 각 열마다 아이템이 차지하는 부분을 areas에 적듯이 적어주고 옆에 열 높이를 함께 적는다. 행 너비는 마지막 줄에 /로 구분 후 적어준다.

 

 

3) (grid-)row-gap, (grid-)column-gap: 그리드 공간 사이의 간격을 조정한다. 그리드 선의 두께를 정하는 것과 같음.

★ (grid-)gap: 3)의 단축 속성. 열 사이의 간격, 행 사이의 간격 순서로 적는다.

 

 

4) grid-auto-rows, grid-auto-columns: 암시적으로 생성된 행이나 열의 크기를 지정한다. grid-auto-flow가 단축 속성이다.

 

★ grid: 1)~4)의 단축 속성.  

grid: <grid-template>;

grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;

grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;

 

 

👉여기서부터 grid item 속성

 

1) grid-row, grid-column: -start -end의 단축 속성. 아이템을 배치하기 위해 그리드 선을 기준으로 시작 위치와 끝 위치를 잡아준다. 숫자 또는 선 이름을 지정하거나, span을 이용한다. span + 숫자는 숫자만큼 라인을 확장하는 개념이다.

grid-row: 1 / 3; grid-column: 2 / 5;인 경우의 아이템 위치

 

 

★ grid-area: 1)의 총집합 단축 속성. 영역의 이름을 부여하는 기능도 있다. 순서는 열시작/행시작/열끝/행끝이다!

grid-area: 1 / col4-start / last-line / 6; 이런 식으로 작성 가능.

 

그 외에도 flex와 같이 justify-content, -items, align-content, -item, justify-self, align-self를 사용할 수 있다. (아래 사진 참고)