CSS Grid는 2차원 레이아웃 시스템으로, 행과 열 모두를 제어하며 복잡한 레이아웃을 만드는데 매우 유용합니다. 다음은 CSS Grid의 주요 속성에 대한 설명입니다.
-
display: grid 컨테이너를 정의합니다.
- grid: 블록 수준 그리드를 생성합니다.
- inline-grid: 인라인 수준 그리드를 생성합니다.
-
grid-template-rows / grid-template-columns: 각각 행과 열의 크기와 개수를 정의합니다. 각 값은 그리드 트랙의 크기를 정의하며, 값들 사이의 공백은 각각의 트랙을 분리합니다.
-
grid-template-areas: 그리드 영역을 이름으로 참조하고, 그리드의 구조를 시각적으로 표현합니다.
-
grid-template:
grid-template-rows,grid-template-columns, 그리고grid-template-areas를 단일 선언으로 결합하는 단축 속성입니다. -
grid-gap (row-gap / column-gap): 행과 열 사이의 간격을 정의합니다. grid-gap은 row-gap과 column-gap을 동시에 설정하는 단축 속성입니다.
-
justify-items: 그리드 셀 내부의 항목을 가로축(justify)에서 어떻게 정렬할지 설정합니다. (start, end, center, stretch 등)
-
align-items: 그리드 셀 내부의 항목을 세로축(align)에서 어떻게 정렬할지 설정합니다. (start, end, center, stretch 등)
-
justify-content / align-content: 그리드 자체를 각각 가로축과 세로축에서 어떻게 정렬할지 설정합니다.
또한 그리드 항목(item)에 대한 속성도 있습니다.
-
grid-column-start / grid-column-end / grid-row-start / grid-row-end: 항목이 그리드의 어떤 열/행에서 시작하고 끝날지를 결정합니다.
-
grid-column / grid-row: 각각
grid-column-start/grid-column-end와grid-row-start/grid-row-end를 결합하는 단축 속성입니다. -
grid-area: 항목의 그리드 영역을 지정하거나,
grid-row-start,grid-column-start,grid-row-end, 그리고grid-column-end를 한번에 설정하는 단축 속성입니다. -
justify-self / align-self: 그리드 셀 내부에서 항목을 각각 가로축과 세로축에서 어떻게 정렬할지 설정합니다. 이 속성들은 개별 항목에 적용됩니다.
