화면 구성하기 - grid

2차원 표현을 위한 layout, Grid

grid는 컨테이너의 방향을 지정하는 flex와 비슷하지만, 격자형식의 모델을 지원한다는 점에서 차이가 있습니다.

 

 

 

display: grid

grid 모델은 행과 열을 기준으로 정렬하는 격자형 배치방법입니다.

flex와 마찬가지로 부모가 되는 컨테이너, 자식이 되는 셀로, 셀 내부 아이템으로 구성되어있으며,

축을 기준으로 하는 flex와 달리 행을 뜻하는 row, 열을 뜻하는 flex, 아이템 간 간격인 gutters로 구성되어있습니다.

 

column

row

col 1

col 2

row1

row2

gutter

item1

item2

item3

item4

 

 

container : grid를 지정하는 부모 컨테이너(회색부분)로, 행과 열을 설정할 수 있습니다.

row : 행을 나타내는 부분으로 grid-template-rows를 사용하여 행의 개수 및 길이를 지정할 수 있습니다.

column : 열을 나타내는 부분으로, grid-template-columns를 사용하여 열의 개수 및 길이를 지정할 수 있습니다.

cell : 행과 열로 지정된 컨테이너의 구역입니다. 이 안에 아이템을 집어넣습니다.

item : 행과 열에 배정하는 각각의 컨테이너들 입니다.

   인접한 여러 행과 열에 하나의 컨테이너를 배치할 수도 있습니다.

gutter : 아이템 사이의 간격을 뜻합니다. column-gap 또는 row-gap을 활용하여 간격을 지정할 수 있습니다.