display: grid
CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 요소 간의 관계를 정의하는데 아주 탁월한 속성입니다.
| 속성 | 설명 |
|---|---|
| grid | grid 속성은 그리드 레이아웃을 정의합니다. |
| grid-area | grid-area |
| grid-auto-columns | grid-auto-columns는 열의 크기를 설정합니다. |
| grid-auto-flow | grid-auto-flow는 자동 배치 방식을 설정합니다. |
| grid-auto-rows | grid-auto-rows는 행의 크기를 설정합니다. |
| grid-column | grid-column |
| grid-column-end | grid-column-end |
| grid-column-gap | grid-column-gap |
| grid-column-start | grid-column-start |
| grid-gap | grid-gap |
| grid-row | grid-row는 그리드 아이템의 단축 속성을 설정합니다. |
| grid-row-gap | grid-row-gap는 그리드 컬럼 행의 간격을 설정합니다. |
| grid-row-start | grid-row-start는 그리드 아이템 컬럼의 시작 위치를 설정합니다. |
| grid-row-end | grid-row-end는 그리드 아이템 컬럼의 끝 위치를 설정합니다. |
| grid-template | grid-template |
| grid-template-areas | grid-template-areas |
| grid-template-columns | grid-template-columns 속성은 가로 컴럼의 정렬 상태를 정의합니다. |
| grid-template-rows | grid-template-rows 속성은 세로 컴럼의 정렬 상태를 정의합니다. |
grid-template-columns
grid-template-columns 속성은 가로 컴럼의 정렬 상태를 정의합니다.
grid-template-columns
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-columns: 1fr 1fr 1fr
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-columns: 100px 300px 1fr 1fr 1fr 1fr
grid-template-columns: repeat(6, 1fr)
grid-template-columns: repeat(6, 200px)
grid-template-columns: repeat(auto-fill, 150px)
grid-template-columns: 400px repeat(auto-fill, 110px)
grid-template-rows
grid-template-rows 속성은 세로 컴럼의 정렬 상태를 정의합니다.
grid-template-rows
grid-template-rows: auto
grid-template-rows: 1fr 1fr
grid-template-rows: 1fr 2fr
grid-template-rows: 1fr 2fr 3fr
grid-template-rows: repeat(3, 1fr)
grid-template-rows: repeat(3, 150px)
grid-template-rows: repeat(auto-fill, 140px)
grid-template-rows: 400px repeat(auto-fill, 120px)
grid-template-rows: 150px auto mixmax(100px, 160px)
grid-column-start
grid-column-start 속성은 컬럼의 시작 위치를 정의합니다.
grid-column-end
grid-column-end 속성은 컬럼의 마지막 위치를 정의합니다.
grid-column
grid-column 속성은 컬럼의 위치를 정의합니다.
grid-gap
grid-gap 속성은 컬럼의 간격을 정의합니다.