Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다.
Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있습니다.
| grid |
grid 속성은 그리드 레이아웃 속성을 설정합니다. |
| grid-area |
grid-area 속성은 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성입니다. |
| grid-auto-columns |
grid-auto-columns 속성은 암시적인 열(Track)의 크기를 자동으로 설정합니다. |
| grid-auto-flow |
grid-auto-flow 속성은 자동 배치 알고리즘 방식을 정의합니다. |
| grid-auto-rows |
grid-auto-rows 속성은 암시적인 행(Track)의 크기를 자동으로 설정합니다. |
| grid-column |
grid-column 속성은 컬럼 속성을 설정합니다. |
| grid-column-end |
grid-column-end 속성은 그리드 아이템의 열 끝 위치 지정합니다. |
| grid-column-gap |
grid-column-gap 속성은 열과 열 사이의 간격(Line)을 설정합니다. |
| grid-column-start |
grid-column-start 속성은 그리드 아이템의 열 시작 위치 지정합니다. |
| grid-gap |
grid-gap 속성은 컬럼의 간격을 설정합니다. |
| grid-row |
grid-row 속성은 grid-row-xxx의 단축 속성(행 시작/끝 위치)입니다. |
| grid-row-gap |
grid-row-gap 속성은 행과 행 사이의 간격(Line)을 정의합니다. |
| grid-row-end |
그리드 아이템의 행 끝 위치 지정합니다. |
| grid-row-gap |
grid-row-gap 속성은 행과 행 사이의 간격(Line)을 정의합니다. |
| grid-row-start |
grid-row-start 속성은 그리드 아이템(Item)의 행 시작 위치 지정합니다. |
| grid-template |
grid-template 속성은 컬럼의 속성을 설정합니다. |
| grid-template-areas |
grid-template-areas 속성은 컬럼의 영역을 설정합니다. |
| grid-template-columns |
grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다. |
| grid-template-rows |
grid-template-rows 속성은 세로 컬럼의 크기와 위치를 설정합니다. |