[CSS ] 06. Grid 레이아웃

1. Grid 레이아웃이란?

Grid는 행(Row)과 열(Column)을 기준으로 요소를 배치하는 레이아웃 방식이다.

Flexbox가 한 방향 정렬에 초점을 둔다면, Grid는 화면을 격자로 나누어 배치하는 데 사용된다.

부모 요소에 grid를 적용하여 레이아웃을 구성한다.

.container {
    display: grid;
}

열(Column)의 개수와 크기를 정의한다.

.container {
    grid-template-columns: 100px 100px 100px;
}

비율 단위(fr)를 사용할 수도 있다.

.container {
    grid-template-columns: 1fr 2fr 1fr;
}

행(Row)의 개수와 크기를 정의한다.

.container {
    grid-template-rows: 100px 200px;
}

행과 열 사이의 간격을 설정한다.

.container {
    gap: 20px;
}

방향별로 설정할 수도 있다.

.container {
    row-gap: 10px;
    column-gap: 20px;
}

아이템이 차지할 열 범위를 지정한다.

.item {
    grid-column: 1 / 3;
}

1번 열부터 3번 열 앞까지 차지한다.

아이템이 차지할 행 범위를 지정한다.

.item {
    grid-row: 1 / 2;
}

행과 열 범위를 한 번에 지정한다.

.item {
    grid-area: 1 / 1 / 3 / 3;
}

순서: row-start / column-start / row-end / column-end

영역 이름을 사용하여 레이아웃을 구성할 수 있다.

.container {
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

아이템에 영역 이름을 지정한다.

.header {
    grid-area: header;
}