라인 CSS 수업송준섭
display:grid
디스플레이 그리드
사이트의 레이아웃은 어떻게 작업할까요?
학습 주제
CSS 그리드 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 요소간의 관계를 정의하는데 아주 탁월한 속성입니다.
| 속성 | 설명 |
|---|---|
| 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 속성은 컬럼의 간격 설정합니다. |
| 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-start | grid-row-start 속성은 그리드 아이템(Item)의 행 시작 위치 지정합니다. |
| grid-row-end | grid-row-end 속성은 그리드 아이템(Item)의 행 시작 위치 지정합니다. |
| 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를 이용한 레이아웃 설정입니다.