레이아웃을 정할 때 flexbox도 많이 쓰지만 조금 더 단순하고 다양한 레이아웃을 만들기 위해 grid를 사용한다.
Grid는 CSS Flex와 같이 Container(컨테이너)-부모태그와 Item(아이템)-자식태그라는 두 가지 개념으로 구분되어 있다.
container
display를 grid(block)/inline-grid(inline) 값으로 주고 속성 값을 입력한다.
- grid-template-rows 명시 행(Track)의 크기를 정의
- grid-template-columns 명시 열(Track)의 크기를 정의
- grid-template-areas 영역(Area) 이름을 참조해 템플릿 생성
- grid-template grid-template-xxx의 단축 속성
📍fr(fraction, 공간 비율) 단위를 사용할 수 있다.
-
row-gap(grid-row-gap) 행과 행 사이의 간격(Line)을 정의
-
column-gap(grid-column-gap)열과 열 사이의 간격(Line)을 정의
-
gap(grid-gap) xxx-gap의 단축 속성
-
grid-auto-rows 암시 행(Track)의 크기를 정의
-
grid-auto-columns 암시 열(Track)의 크기를 정의
-
grid-auto-flow 자동 배치 알고리즘 방식을 정의
-
align-content 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
-
justify-content 그리드 콘텐츠를 수평(행 축) 정렬
-
place-content align-content와 justify-content의 단축 속성
-
align-items 그리드 아이템(Items)들을 수직(열 축) 정렬
-
justify-items 그리드 아이템들을 수평(행 축) 정렬
-
place-items align-items와 justify-items의 단축 속성
item
- grid-row-start 그리드 아이템(Item)의 행 시작 위치 지정
- grid-row-end 그리드 아이템의 행 끝 위치 지정
- grid-row grid-row-xxx의 단축 속성(행 시작/끝 위치)
- grid-column-start 그리드 아이템의 열 시작 위치 지정
- grid-column-end 그리드 아이템의 열 끝 위치 지정
- grid-column grid-column-xxx의 단축 속성(열 시작/끝 위치)
- grid-area 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
- align-self 단일 그리드 아이템을 수직(열 축) 정렬
- justify-self 단일 그리드 아이템을 수평(행 축) 정렬
- place-self align-self와 justify-self의 단축 속성
- order 그리드 아이템의 배치 순서를 지정
- z-index 그리드 아이템의 쌓이는 순서를 지정
