CSS Grid – 현대적인 레이아웃을 만드는 방법

1. CSS Grid란?

CSS Grid는 2차원 레이아웃 시스템으로, 행(row)과 열(column)을 조합하여 복잡한 레이아웃을 쉽게 구성할 수 있도록 도와주는 강력한 CSS 기능입니다. 기존의 Flexbox가 1차원(가로 또는 세로 정렬) 레이아웃을 다루는 데 비해, Grid는 가로와 세로를 동시에 제어할 수 있다는 점에서 차별화됩니다.

CSS Grid를 사용하면 웹페이지의 전체 레이아웃을 손쉽게 정의할 수 있으며, 반응형 웹 디자인에도 유리합니다. 또한 코드의 가독성이 높아지고 유지보수가 용이하여 현대적인 웹 개발에서 필수적으로 활용되고 있습니다.

이번 글에서는 CSS Grid의 기본 개념과 핵심 속성을 알아보고, 실전 예제를 통해 활용 방법을 살펴보겠습니다.

2. CSS Grid의 기본 개념

(1) Grid Container와 Grid Item

CSS Grid는 grid container(그리드 컨테이너) 안에서 **grid item(그리드 아이템)**을 배치하는 방식으로 동작합니다.

• Grid Container: display: grid; 속성을 가진 부모 요소
• Grid Item: 그리드 컨테이너 내부에 배치된 자식 요소

css

복사편집

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

위 코드에서 .container는 Grid Container이며, 3개의 열과 2개의 행을 갖는 레이아웃을 정의했습니다.

(2) grid-template-columns & grid-template-rows

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

css

복사편집

.container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* 가변적인 비율 */ grid-template-rows: 150px auto; /* 첫 번째 행은 고정, 두 번째 행은 자동 크기 */ }

• fr(fraction) 단위는 남은 공간을 비율에 맞게 분배하는 기능을 합니다.
• auto는 컨텐츠 크기에 따라 자동 조정됩니다.

3. 주요 CSS Grid 속성

CSS Grid에는 다양한 속성이 있으며, 그중 자주 사용되는 몇 가지를 살펴보겠습니다.

(1) gap: 간격 조정

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

css

복사편집

.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }

• grid-gap은 grid-row-gap과 grid-column-gap을 합친 단축 속성입니다.
• 최신 CSS에서는 gap 속성만 사용하면 됩니다.

(2) grid-column & grid-row: 특정 영역 지정

그리드 아이템이 차지할 위치를 지정할 수 있습니다.

css

복사편집

.item1 { grid-column: 1 / 3; /* 1번 열에서 3번 열까지 차지 */ grid-row: 1 / 2; /* 1번 행부터 2번 행까지 차지 */ }

이렇게 하면 .item1이 첫 번째 행의 첫 번째 열부터 두 번째 열까지 차지하게 됩니다.

(3) justify-items & align-items: 아이템 정렬

각 그리드 아이템의 정렬 방법을 결정합니다.

css

복사편집

.container { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; /* 수평 중앙 정렬 */ align-items: center; /* 수직 중앙 정렬 */ }

• justify-items: 수평 정렬 (start, center, end, stretch)
• align-items: 수직 정렬 (start, center, end, stretch)

(4) grid-auto-flow: 자동 배치 방식 설정

아이템이 그리드에 배치되는 방식을 설정합니다.

css

복사편집

.container { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: column; }

• row(기본값): 행을 먼저 채운 후 다음 행으로 이동
• column: 열을 먼저 채운 후 다음 열로 이동

4. 실전 예제 – 반응형 카드 레이아웃

CSS Grid를 활용하여 반응형 카드 레이아웃을 만들어보겠습니다.

html

복사편집

<div class="grid-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>

css

복사편집

.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; } .item { background: #3498db; color: white; padding: 20px; text-align: center; font-size: 20px; }

설명

• repeat(auto-fit, minmax(150px, 1fr)): 화면 크기에 따라 자동으로 열 개수를 조절
• gap: 20px;: 카드 사이의 간격 설정

이 방식은 반응형 디자인에 유리하며, 다양한 화면 크기에서 유연하게 레이아웃이 조정됩니다.

5. 결론

CSS Grid는 현대적인 웹 레이아웃을 구성하는 가장 강력한 도구 중 하나입니다. 기존의 Flexbox보다 2차원적인 배치가 가능하므로, 복잡한 레이아웃을 더욱 쉽게 만들 수 있습니다.

주요 개념을 정리하면 다음과 같습니다.

• grid-template-columns / grid-template-rows: 열과 행의 크기 설정
• gap: 그리드 아이템 사이 간격 조정
• grid-column / grid-row: 특정 영역을 차지하는 위치 지정
• justify-items / align-items: 아이템 정렬 방식 설정
• grid-auto-flow: 자동 배치 방향 조절

CSS Grid를 활용하면 깔끔하고 유연한 레이아웃을 쉽게 만들 수 있으며, 유지보수도 간편합니다.
웹 개발에서 필수적인 기술이므로, 다양한 예제를 연습하면서 실전 감각을 익히는 것이 중요합니다.