Grid Areas로 CSS 레이아웃 구성하기

Grid Areas로 레이아웃을 구성하는 방법을 알아보자.

1. Flex와 Grid의 차이점

Flex

Flex는 아이템을 가로(행/row) 또는 세로(열/column) 중 한 방향으로 1차원적으로 배치할 수 있게 도와준다.

Grid

Grid는 아이템을 가로축과 세로축의 2차원적으로 배치할 수 있게 도와준다.

2. Grid 개념

그리드와 그리드 셀

부모 컨테이너에 display: grid로 그리드(Grid)를 지정해 주면, 그리드 안에 들어있는 자식 요소들은 모두 그리드 셀(Grid Cell)로 변환된다.

grid

grid cell	grid cell	grid cell
grid cell	grid cell	grid cell
grid cell	grid cell	grid cell

3. Grid Areas로 레이아웃 구성하기

그리드 레이아웃 방식에는 여러 가지가 있지만, 여기서는 Grid Areas로 레이아웃을 구성하는 방법을 알아본다.

그리드

부모 컨테이너인 그리드는 그리드의 전체적인 모양이나 사이즈를 지정할 수 있다.

• grid-areas

강력한 그리드 방식으로, 템플릿 영역에 이름을 지정하여 아이템을 배치할 수 있다.

• grid-gap

그리드 셀 사이의 간격을 지정할 수 있다. grid-column-gap 또는 grid-row-gap을 사용하면, 행과 열에 개별적으로 간격을 줄 수 있다.

그리드 셀

자식 요소들인 각각의 그리드 셀은 자신이 그리드 내에서 몇 개의 셀을 차지하고, 어떤 셀에 표기가 될 것인지 지정할 수 있다.

• grid-area

지정해둔 템플릿 영역 이름을 통해 어떤 영역에 보일 것인지 지정할 수 있다.

실습

실습 1

A	A	A
B	C	C
B	D	E

See the Pen Grid Areas 1 by blog dunku (@blog-dunku) on CodePen.

실습 2

A	A	C
E	D	C
B	B	C

See the Pen Grid Areas 2 by blog dunku (@blog-dunku) on CodePen.

실습 3

Header	Header
Nav	Main
Nav	Footer

See the Pen Grid Areas by blog dunku (@blog-dunku) on CodePen.