grid layout은 페이지를 여러 주요 영역으로 나누거나, 크키와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는데 탁월합니다.
flex 처럼 반응형 디자인을 만들 때 사용하는 방법 중 하나입니다.
flex와 grid의 큰 차이점
- flex는 한 방향 레이아웃 시스템 (1차원)
- grid는 두 방향 (가로-세로) 레이아웃 시스템 (2차원)
따라서 flex 보다 더 복합적인 레이아웃 표현이 가능합니다.
grid 속성
부모 요소인 grid container 와 자식 요소인 grid item이 있습니다.
container가 grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 item들이 어떤 형태로 배치되는 것이라고 생각하시면 됩니다.
flex와 마찬가지로, grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작합니다.
display: grid;그리드 형태 정의
컨테이너에 grid 트랙의 크기들을 지정해주는 속성입니다.
여러가지 단위를 사용할 수 있고 섞어서 쓸 수 도 있습니다.
| 속성 값 | 속성 설명 |
| grid-template-rows | 행(row)의 크기를 결정 |
| grid-template-columns | 열(column)의 크기를 결정 |
간격 만들기
그리드 셀 사이의 간격을 설정합니다.
| 속성 값 | 속성 설명 |
| row-gap | 행(row)의 간격을 설정 |
| column-gap | 열(column)의 간격을 설정 |
그리드 형태를 자동으로 정의
grid-template-columns 또는 grid-template-rows의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성입니다.
| 속성 값 | 속성 설명 |
| grid-auto-rows | 행(row)의 크기를 자동으로 설정 |
| grid-auto-columns | 열(column)의 크기를 자동으로 설정 |
각 셀의 영역 지정
grid 아이템에 적용하는 속성으로, 각 셀의 영역을 지정합니다.
| 속성 값 | 속성 설명 |
| grid-column-start | 그리드 아이템 행의 시작 위치를 설정 |
| grid-column-end | 그리드 아이템 행의 끝 위치를 설정 |
| grid-column | 행의 start와 end 속성을 한번에 쓰는 축약형 |
| grid-row-start | 그리드 아이템 열의 시작 위치를 설정 |
| grid-row-end | 그리드 아이템 열의 끝 위치를 설정 |
| grid-row | 열의 start와 end 속성을 한번에 쓰는 축약형 |
grid-template-areas
각 영역(grid area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법입니다.
#wrap {
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer";
}위의 형태로 각자 차지하는 셀의 개수만큼 해당 위치에 이름을 써주면 됩니다.
빈칸은 마침표 또는 "none"을 사용하면 되고, 마침표의 개수는 여러 개를 써도 상관 없습니다.
각 영역의 이름은 해당 아이템 요소에 grid-area 속성으로 이름을 지정해주면 됩니다.
#header {
grid-area: header;
}
#nav {
grid-area: nav;
}
#aside {
grid-area: aside;
}
#section {
grid-area: section;
}
#footer {
grid-area: footer;
}
grid-auto-flow
아이템이 자동 배치되는 흐름을 결정하는 속성입니다.
grid 배치의 기본 설정은 아이템이 row를 기준으로 순서대로 배치가 되다가 들어갈 자리가 없으면 그 칸은 비워두고 아래로 배치가 됩니다.
dense는 기본적으로 빈 셀을 채우는 알고리즘이며, row와 column에 따라 기준이 달라집니다.
방향 정렬
| 속성 값 | 속성 설명 |
| align-items | 아이템들을 세로(column)축 방향으로 정렬, 컨테이너에 적용 |
| justify-items | 아이템들을 가로(row)축 방향으로 정렬, 컨테이너에 적용 |
| place-items | align-items와 justify-items를 같이 쓸 수 있는 단축 속성 align-items, justify-items의순서로 작성하고,하나의 값만 쓰면 두 속성 모두에 적용됩니다. |
그룹 정렬
| 속성 값 | 속성 설명 |
| align-content | 아이템 그룹 세로 정렬 grid 아이템들의 높이를 모두 합한 값이 grid 컨테이너의 높이보다 작을 때 grid 아이템들을 통째로 정렬합니다. |
| justify-content | 아이템 그룹 가로 정렬 grid 아이템들의 너비를 모두 합한 값이 grid 컨테이너의 너비보다 작을 때 grid 아이템들을 통째로 정렬합니다. |
| place-content | align-content와 justify-content를 같이 쓸 수 있는 단축 속성 align-content, justify-content의순서로 작성하고,하나의 값만 쓰면 두 속성 모두에 적용됩니다. |
개별 아이템 정렬
| 속성 값 | 속성 설명 |
| align-self | 해당 아이템들을 세로(column)축 방향으로 정렬, 아이템에 적용 |
| justify-self | 해당 아이템들을 가로(row)축 방향으로 정렬, 아이템에 적용 |
| place-self | align-self와 justify-self를 같이 쓸 수 있는 단축 속성 align-self, justify-self의순서로 작성하고,하나의 값만 쓰면 두 속성 모두에 적용됩니다. |
order
각 아이템들의 시각적 나열 순서를 결정하는 속성입니다.
숫자값이 들어가며, 작은 숫자일수록 먼저 배치됩니다.
z-index
z-index로 z축 정렬을 할 수 있습니다.
숫자가 클수록 위로 올라옵니다.