라인 CSS 수업웹스토리보이
display:grid
디스플레이 그리드
사이트의 레이아웃은 어떻게 작업할까요?
학습 주제
CSS 그리드 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 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: 1fr 1fr 1fr 1fr
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-columns: 200px 300px 1fr 1fr 1fr
grid-template-columns: repeat(6, 1fr)
grid-template-columns: repeat(auto-fill, 150px)
grid-template-columns: 200px repeat(auto-fill, 110px)
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 minmax(100px, 160px)
grid-column-start
grid-column-start 속성은 컬럼의 시작 위치를 설정합니다.
grid-column-end
grid-column-end 속성은 컬럼의 마지막 위치를 설정합니다.
grid-column
grid-column 속성은 컬럼 속성을 설정합니다.
레이아웃1
grid를 이용한 레이아웃 설정입니다.
레이아웃2
grid를 이용한 레이아웃 설정입니다.
레이아웃3
grid를 이용한 레이아웃 설정입니다.
레이아웃4
grid를 이용한 레이아웃 설정입니다.