CSS Grid: display: grid 속성 완벽 가이드

1. CSS Grid란?

CSS Grid는 웹 페이지의 레이아웃을 구성하는 강력한 방법 중 하나로, 2차원(행과 열)으로 요소를 배치할 수 있는 CSS 레이아웃 시스템입니다. display: grid 속성을 사용하면 부모 요소를 **그리드 컨테이너(Grid Container)**로 만들고, 내부 자식 요소들을 **그리드 아이템(Grid Item)**으로 설정할 수 있습니다.

2. 기본 문법

.container {
    display: grid; /* 부모 요소를 Grid 컨테이너로 지정 */
    grid-template-columns: 200px 200px 200px; /* 3개의 열(컬럼) 설정 */
    grid-template-rows: 100px 100px; /* 2개의 행(로우) 설정 */
    gap: 10px; /* 행과 열 사이의 간격 */
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

위의 코드에서는 .container 요소가 display: grid 속성을 가지며, 내부의 .item 요소들이 3열 x 2행의 그리드 구조로 배치됩니다.

3. 주요 속성

3.1 grid-template-columns & grid-template-rows

각각 열과 행의 크기를 정의하는 속성입니다.

.container {
    grid-template-columns: 100px 200px auto; /* 1열: 100px, 2열: 200px, 3열: 자동 조정 */
    grid-template-rows: 150px auto; /* 1행: 150px, 2행: 자동 조정 */
}

3.2 repeat() 함수

여러 개의 동일한 크기의 열이나 행을 설정할 때 사용됩니다.

.container {
    grid-template-columns: repeat(3, 1fr); /* 3개의 동일한 너비의 열 */
    grid-template-rows: repeat(2, 100px); /* 2개의 동일한 높이의 행 */
}

3.3 fr 단위

fr(fraction)은 가변적인 비율을 나타냅니다.

.container {
    grid-template-columns: 1fr 2fr 1fr; /* 두 번째 열이 가장 넓게 설정됨 */
}

3.4 gap

그리드 아이템 간의 간격을 조정합니다.

.container {
    gap: 20px; /* 행과 열 모두 20px 간격 */
    row-gap: 10px; /* 행 간격만 10px */
    column-gap: 15px; /* 열 간격만 15px */
}

3.5 grid-auto-rows & grid-auto-columns

명시적으로 정의되지 않은 행이나 열의 크기를 설정할 때 사용됩니다.

.container {
    grid-auto-rows: 100px; /* 자동 생성되는 행의 크기 */
    grid-auto-columns: 200px; /* 자동 생성되는 열의 크기 */
}

4. Grid 아이템 속성

4.1 grid-column & grid-row

특정 아이템의 위치를 지정할 때 사용됩니다.

.item {
    grid-column: 1 / 3; /* 1열부터 3열까지 차지 */
    grid-row: 2 / 4; /* 2행부터 4행까지 차지 */
}

4.2 grid-area

아이템을 특정 영역에 배치하는 속성입니다.

.item {
    grid-area: 1 / 1 / 3 / 3; /* (row-start / column-start / row-end / column-end) */
}

4.3 justify-items, align-items, place-items

아이템을 수평 및 수직 방향으로 정렬할 때 사용합니다.

.container {
    justify-items: center; /* 수평 정렬 (start, center, end, stretch) */
    align-items: center; /* 수직 정렬 (start, center, end, stretch) */
    place-items: center; /* 두 속성을 동시에 설정 */
}

4.4 justify-content, align-content, place-content

그리드 전체의 정렬 방식을 설정합니다.

.container {
    justify-content: center; /* 가로 방향 정렬 */
    align-content: center; /* 세로 방향 정렬 */
    place-content: center; /* 두 속성을 동시에 설정 */
}

5. 반응형 디자인에서 Grid 활용

CSS Grid는 미디어 쿼리와 함께 사용하면 반응형 웹 디자인을 쉽게 구현할 수 있습니다.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 기본적으로 4개의 열 */
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr); /* 화면이 작아지면 2개의 열로 변경 */
    }
}

@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr; /* 더 작은 화면에서는 1열로 변경 */
    }
}

6. Grid와 Flexbox 비교

속성CSS GridFlexbox

축	2차원(행 + 열)	1차원(행 또는 열)
정렬	고정된 배치 가능	유연한 배치 가능
사용 예시	전체 페이지 레이아웃	네비게이션 바, 버튼 그룹