CSS 레버런스 북

Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.

grid에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 grid container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 grid item에서 정의합니다. 이를 분리해서 적용하는 것이 grid에서 가장 중요합니다.

  • grid container 속성(부모) : grid, grid-auto, grid-template, grid-gap
  • grid item 속성(자식) : grid-area, grid-row, grid-column
속성 설명
grid 그리드 위치, 높이(행), 넓이(열)를 설정합니다.
grid-area 그리드의 위치를 설정합니다.
grid-auto-columns 자동으로 명명후 영역의 열의 크기를 설정합니다.
grid-auto-flow 자동으로 그리드 위치를 설정합니다.
grid-auto-rows 자동으로 명명후 그리드 영역의 행의 크기를 설정합니다.
grid-column 그리드 열 위치, 열 간격을 설정합니다.
grid-column-end 그리드 열 끝 위치를 설정합니다.
grid-column-gap 그리드 열 간격을 설정합니다.
grid-column-start 그리드 열 시작 위치를 설정합니다.
grid-gap 그리드 간격을 설정합니다.
grid-row 그리드 행 위치, 행 간격을 설정합니다.
grid-row-end 그리드 행 끝 위치를 설정합니다.
grid-row-gap 그리드 행 간격을 설정합니다.
grid-row-start 그리드 행 시작 위치를 설정합니다.
grid-template 명명된 그리드 위치, 높이(행), 넓이(열)를 설정합니다.
grid-template-areas 그리드 영역에 각각에 이름을 활당하고 위치를 설정합니다.
grid-template-columns 명명된 그리드 영역의 열의 크기를 설정합니다.
grid-template-rows 명명된 그리드 영역의 행의 크기를 설정합니다.