[CSS] 그리드(Grid) 사용법 완전 정리! (레이아웃 예제 포함)

 

안녕하세요! 오늘은 CSS Grid Layout에 대해 알아보겠습니다.
그리드는 웹 레이아웃을 만들 때 매우 강력하고 유연한 도구입니다.
기존의 float, position, flexbox로 어렵게 만들던 복잡한 레이아웃을, Grid를 사용하면 간단하고 명확하게 만들 수 있어요.

---

CSS Grid란?

CSS Grid Layout은 2차원 레이아웃 시스템입니다.
즉, **행(row)**과 **열(column)**을 기준으로 요소를 배치할 수 있어 복잡한 구조도 쉽게 구현 가능합니다.

flex는 1차원(가로 or 세로), grid는 2차원(가로 + 세로) 배치가 가능!

---

기본 문법

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3열 */
  grid-template-rows: auto;          /* 자동 행 높이 */
  gap: 20px;                          /* 그리드 간격 */
}

• display: grid: 그리드 컨테이너로 선언
• grid-template-columns: 열의 개수와 비율
• grid-template-rows: 행의 높이 설정
• gap: 셀 간격 설정

---

간단한 예시

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.container > div {
  background: #e0e0e0;
  padding: 20px;
  text-align: center;
}
</style>

---

주요 속성 정리

◆ grid-template-columns, grid-template-rows

grid-template-columns: 200px 1fr 2fr;

• 열을 각각 200px, 1:2 비율로 설정

---

◆ grid-column, grid-row

셀을 병합할 수 있습니다.

.item {
  grid-column: 1 / 3; /* 1번부터 3번 열까지 병합 */
  grid-row: 1 / 2;
}

---

◆ grid-area + grid-template-areas

이름으로 그리드 위치 지정 가능:

 

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

자동 배치(auto placement)

아이템이 자동으로 그리드 셀에 들어갑니다.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

 

반응형 디자인에 매우 유용!

---

그리드 vs 플렉스 차이점

구분	Flex	Grid
레이아웃	1차원(행 또는 열)	2차원(행과 열 모두)
용도	요소 정렬 중심	전체 페이지 구조 중심
복잡성	간단한 UI 구성	복잡한 레이아웃 구현에 강함

 

개념설명

 

display: grid	그리드 컨테이너 선언
grid-template-columns	열 너비 설정
gap	셀 간 간격 설정
grid-area	아이템의 위치 이름 지정
auto-fill, minmax	반응형 그리드 구현

 

Grid는 초반에 조금 어렵게 느껴지지만, 익숙해지면 코딩 생산성과 디자인 유연성 모두 향상됩니다.
한 번 제대로 익혀두면 복잡한 레이아웃도 거뜬하게 만들 수 있어요!

 

궁금하신게 있으시면 댓글 달아주세요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.