2026.03.24

[CSS 기초] Grid 레이아웃의 개념과 기본 사용 방법

Grid 레이아웃의 개념과 구조, 주요 속성, 실제 사용 방법을 정리합니다.

css

grid

그리드

레이아웃

반응형

Grid 레이아웃 📦

Grid는 행(Row)과 열(Column)을 기준으로 레이아웃을 만드는 방식입니다.

flex가 한 방향 정렬이라면
grid는 행과 열을 동시에 제어할 수 있는 2차원 레이아웃입니다.

카드 레이아웃, 갤러리, 전체 페이지 구성 등에 많이 사용됩니다.

주요 포인트 Top3

# 2차원 레이아웃 📐

행과 열을 동시에 제어할 수 있습니다

# 부모 요소 적용 🧱

grid는 부모 요소에 적용합니다

# 반응형 활용 📱

반응형 레이아웃 제작에 유리합니다

01. Grid 기본 구조

Grid는 부모 요소에 display: grid를 적용합니다.

HTML

html

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

CSS

css

.container{
  display: grid;
  border: 3px solid black;
  gap: 10px;
}
 
.item{
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
 
.item:nth-child(1){
  background-color: tomato;
}
 
.item:nth-child(2){
  background-color: teal;
}
 
.item:nth-child(3){
  background-color: gold;
}

👉 결과 설명

기본적으로 세로 방향으로 정렬됩니다
아직 열(column)을 지정하지 않았기 때문입니다

02. grid-template-columns

열(column)의 개수를 지정하는 속성입니다.

HTML

html

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

CSS

css

.container{
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 10px;
}
 
.item{
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
 
.item:nth-child(1){
  background-color: tomato;
}
 
.item:nth-child(2){
  background-color: teal;
}
 
.item:nth-child(3){
  background-color: gold;
}

👉 결과 설명

3개의 열이 생성됩니다
각 열의 크기는 200px 입니다
요소들이 가로 방향으로 배치됩니다

03. fr 단위

Grid에서는 fr 단위를 사용할 수 있습니다.

fr은 fraction(비율)을 의미합니다.

HTML

html

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

CSS

css

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

👉 결과 설명

전체 영역을 3등분 합니다
각 요소가 동일한 크기로 배치됩니다

04. repeat()

repeat는 값을 반복할 때 사용합니다.

HTML

html

<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>

CSS

css

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

👉 결과 설명

3열 레이아웃이 생성됩니다
요소가 자동으로 다음 줄로 이동합니다

05. gap

Grid에서는 요소 사이 간격을 설정할 때 gap 속성을 사용할 수 있습니다.

gap은 행과 열 사이 간격을 한 번에 설정하는 속성입니다.
즉, 가로 간격과 세로 간격이 동시에 적용됩니다.

HTML

html

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

CSS

css

.container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
 
.item{
  height: 100px;
  background-color: teal;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

👉 결과 설명

2열 레이아웃이 생성됩니다
요소 사이의 가로 간격이 20px 적용됩니다
요소 사이의 세로 간격도 20px 적용됩니다

즉, gap 하나만 작성해도
행과 열 사이 간격을 동시에 설정할 수 있습니다.

06. 실제 사용 예시

HTML

html

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

CSS

css

.container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
 
.card{
  height: 150px;
  background-color: lightgray;
}

👉 결과

카드 3열 레이아웃 생성

07. 반응형 Grid

css

.container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
 
/* 태블릿 */
@media (max-width: 768px){
  .container{
    grid-template-columns: repeat(2, 1fr);
  }
}
 
/* 모바일 */
@media (max-width: 480px){
  .container{
    grid-template-columns: 1fr;
  }
}

👉 결과

PC → 3열
태블릿 → 2열
모바일 → 1열

08. column-gap

column-gap은 열과 열 사이의 간격만 따로 설정하는 속성입니다.

즉, 가로 방향 간격만 따로 조절하고 싶을 때 사용합니다.

HTML

html

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

CSS

css

.container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
}
 
.item{
  height: 100px;
  background-color: tomato;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

👉 결과 설명

가로 방향 간격만 30px 적용됩니다
세로 방향 간격은 적용되지 않습니다

즉, 좌우 간격만 따로 조절하고 싶을 때
column-gap을 사용합니다.

09. row-gap

row-gap은 행과 행 사이의 간격만 따로 설정하는 속성입니다.

즉, 세로 방향 간격만 따로 조절하고 싶을 때 사용합니다.

HTML

html

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

CSS

css

.container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 30px;
}
 
.item{
  height: 100px;
  background-color: purple;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

👉 결과 설명

세로 방향 간격만 30px 적용됩니다
가로 방향 간격은 적용되지 않습니다

즉, 위아래 간격만 따로 조절하고 싶을 때
row-gap을 사용합니다.

10. gap 두 개 값 사용

gap은 값을 하나만 작성할 수도 있지만,
값을 두 개 작성하여 세로 간격과 가로 간격을 각각 다르게 설정할 수도 있습니다.

HTML

html

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

CSS

css

.container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 40px;
}
 
.item{
  height: 100px;
  background-color: gold;
  display: flex;
  justify-content: center;
  align-items: center;
}

👉 결과 설명

첫 번째 값 20px은 row-gap 입니다
두 번째 값 40px은 column-gap 입니다

즉, 위 코드는
세로 간격은 20px, 가로 간격은 40px 이라는 뜻입니다.

순서는 다음과 같이 기억하면 됩니다.

css

gap: 세로 가로;

11. gap 관련 정리

Grid에서 간격을 설정하는 방법은 다음과 같습니다.

css

.container{
  gap: 20px;
  /* 가로, 세로 간격 모두 적용 */
 
  column-gap: 30px;
  /* 가로 간격만 적용 */
 
  row-gap: 30px;
  /* 세로 간격만 적용 */
}

👉 정리

gap → 전체 간격
column-gap → 가로 간격
row-gap → 세로 간격

보통은 전체 간격을 한 번에 주는 gap을 가장 많이 사용하며,
상황에 따라 column-gap과 row-gap을 따로 사용할 수 있습니다.

GOYO.’s Tip 💡

grid는 전체 레이아웃 구성에 적합합니다
flex는 한 방향 정렬에 적합합니다
grid와 flex를 함께 사용하는 경우가 많습니다

마무리 🎯

Grid는 행과 열을 기준으로 레이아웃을 구성하는 방식이며,
카드 레이아웃이나 반응형 레이아웃 제작에 매우 유용합니다.

목록으로 가기

이전 클래스[CSS 기초] clamp()와 calc() 함수의 개념과 실전 사용 방법