1.2 KiB
1.2 KiB
Grid
그리드는 수평선과 수직선으로 이루어진 이차원 레이아웃 시스템입니다.
- columns
- rows
- gutters
컨테이너 요소의 display: grid를 지정하면 직계 자식 요소는 모두 그리드 아이템이 됩니다.
.container {
display: grid;
}
그리드 컨테이너
grid-template-columns: 칼럼의 크기를 원하는 갯수만큼 지정합니다. 절대 크기, 상대 크기, 그리고 fr단위를 사용할 수 있습니다.grid-template-rowsgap=row-gap+column-gap=grid-gap: 트랙 사이의 간격을 지정합니다.grid-auto-rows,grid-auto-columns: 템플릿에 정의한 셀의 갯수보다 아이템이 많은 경우에는 암시적으로 그리드가 생성되는데, 이 때의 셀 크기를 지정합니다.grid-template-areas:grid-area의 이름을 사용해서 아이템이 놓일 영역을 지정합니다.
그리드 아이템
grid-column=grid-column-start+grid-column-end: 1부터 시작되는 번호를 사용해서 아이템이 놓일 영역을 지정합니다.grid-row=grid-row-start+grid-row-endgrid-area:grid-template-areas에서 사용될 이름을 지정합니다.