display Grid를 배워보자
css
작성일 : 2023.02.11
gird는 행과 열이 있는 레이아웃 시스템을 제공한다. 1차원 레이아웃을 지원하는 flex와 다르게 좀 더 복잡한 레이아웃을 위해 grid를 사용할 수 있다.
Grid Properties
gird는 flex와 같이 Container와 Item이라는 두가지 개념으로 구분되어 있는데 Container는 Item을 감싸는 부모 요소이며 그 안에 Item을 배치 할 수 있다.
Grid Container Properties
Container를 위한 속성은 아래와 같다.
속성 | 의미 | 예시 |
---|---|---|
display | 그리드 컨테이너(Container)를 정의 | display : grid |
grid-template-rows | 명시적 행(Track)의 크기를 정의 | grid-template-rows: 20px 20px ... grid-template-rows: repeat(3, 20px) |
grid-template-columns | 명시적 열(Track)의 크기를 정의 | grid-template-rows: 20px 20px ... grid-template-rows: repeat(3, 20px) |
grid-template-areas | 영역(Area) 이름을 참조해 템플릿 생성 | grid-template: grid-template-rows / grid-template-columns grid-template: grid-template-areas grid-template-areas: "header header header" "main main aside" "footer footer footer" |
grid-template | grid-template-rows, columns, areas의 단축 속성 | grid-template: "header header header" 80px "main main aside" 350px "footer footer footer" 130px / 2fr 100px 1fr; |
row-gap(grid-row-gap) | 행과 행 사이의 간격(Line)을 정의 | row-gap: 100px (크기) |
column-gap(grid-column-gap) | 열과 열 사이의 간격(Line)을 정의 | column-gap: 100px (크기) |
gap(grid-gap) | 행과 행, 열과 열 사이의 간격을 정의 | gap: grid-row-gap grid-column-gap |
grid-auto-rows | 암시적인 행(Track)의 크기를 정의 | grid-auto-rows: 100px |
grid-auto-columns | 암시적인 열(Track)의 크기를 정의 | grid-auto-columns: 100px |
grid-auto-flow | 자동 배치 알고리즘 방식을 정의 | grid-auto-flow: row 또는 row dense 또는 dense grid-auto-flow: column 또는 column dense |
grid | grid-template-xxx과 grid-auto-xxx의 단축 속성 | grid: grid-template grid: grid-template-rows / grid-auto-flow grid-auto-columns grid: grid-auto-flow grid-auto-rows / grid-template-columns |
align-content | 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬 | align-content: align-content |
justify-content | 그리드 콘텐츠를 수평(행 축) 정렬 | justify-content: justify-content |
place-content | align-content와 justify-content의 단축 속성 | place-content: align-content justify-content |
align-items | 그리드 아이템(Items)들을 수직(열 축) 정렬 | align-items: align-items |
justify-items | 그리드 아이템들을 수평(행 축) 정렬 | justify-items: justify-items |
place-items | align-items와 justify-items의 단축 속성 | place-items: align-items justify-items |
Grid Item Properties
Item을 위한 속성들은 아래와 같다.
속성 | 의미 | 예시 |
---|---|---|
grid-row-start | 그리드 아이템의 행 시작 위치 지정 | grid-row-start: 1 |
grid-row-end | 그리드 아이템의 행 끝 위치 지정 | grid-row-end: 3 |
grid-column-start | 그리드 아이템의 열 시작 위치 지정 | grid-column-start: 2 |
grid-column-end | 그리드 아이템의 열 끝 위치 지정 | grid-column-end: 3 |
grid-row | grid-row-xxx의 단축 속성(행 시작/끝 위치) | grid-row: grid-row-start / grid-row-end |
grid-column | grid-column-xxx의 단축 속성(열 시작/끝 위치) | grid-column: grid-column-start / grid-column-end |
grid-area | 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성 | grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end |
align-self | 단일 그리드 아이템을 수직(열 축) 정렬 | .item:nth-child(1) .item:nth-child(2) .item:nth-child(3) .item:nth-child(4) |
justify-self | 단일 그리드 아이템을 수평(행 축) 정렬 | .item:nth-child(1) .item:nth-child(2) .item:nth-child(3) .item:nth-child(4) |
place-self | align-self와 justify-self의 단축 속성 | place-self: align-self justify-self |
order | 그리드 아이템의 배치 순서를 지정 | .item:nth-child(1) .item:nth-child(3) .item:nth-child(5) |
z-index | 그리드 아이템의 쌓이는 순서를 지정 | .item:nth-child(2) grid-area: 1 / 2 / 3 / 3; z-index: 1; |
https://www.w3schools.com/css/css_grid.asp |
https://studiomeal.com/archives/533
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout