6. Grid Layout 기본

Jan 07, 2026

Contents

1. Grid 1️⃣ Grid 란?2️⃣ Grid 기본 구조 3️⃣ 가장 많이 쓰는 패턴 4️⃣ Grid 아이템 배치 방법 5️⃣ 영역 이름으로 배치 (실무 핵심) (안 배움)6️⃣ 반응형에서 Grid (auto-fit / minmax) (안 배움)2. 실습 1️⃣ grid-template-columns 2️⃣ gap 3️⃣ span 4️⃣ repeat

1. Grid

1️⃣ Grid 란?

컨테이너 안을 행(row)과 열(column)로 나누고, 요소를 칸에 배치하는 레이아웃

2️⃣ Grid 기본 구조

1) Grid 컨테이너 만들기


.container {
	display: grid;
}

display: grid → 이 순간부터 자식 요소는 grid item

2) 열(column) 정의 : `grid-template-columns`


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

값	의미
px	고정 크기
%	부모 기준
fr	남은 공간 비율
auto	자동

➡️ 위 예시

1열: 200px

2열: 남은 공간의 1

3열: 남은 공간의 1

3) 행(row) 정의 : `grid-template-rows`


grid-template-rows:100px auto 200px;

3️⃣ 가장 많이 쓰는 패턴

1) `repeat()`


grid-template-columns: repeat(3, 1fr);

➡️ 동일한 열을 빠르게 생성

2) `gap` (아이템 사이 간격)


.container {
	gap:20px;
}

row-gap, column-gap도 가능

margin 대신 사용하는 게 Grid 스타일

4️⃣ Grid 아이템 배치 방법

1) 자동 배치 (기본)


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

➡️ 왼쪽 → 오른쪽 → 아래로 자동 배치

2) 위치 직접 지정


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

grid-column: 시작 / 끝

grid-row: 시작 / 끝


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

grid-column: 시작 / n칸 차지

grid-row: 시작 / n칸 차지

3) span 사용


.item {
	grid-column: span2;
}

➡️ 현재 위치에서 2칸 차지

5️⃣ 영역 이름으로 배치 (실무 핵심) (안 배움)

1) grid-template-areas


.container {
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-rows: 60px 1fr 80px;
	grid-template-areas:
	"header header"
	"sidebar main"
	"footer footer";
}


.header  {grid-area: header; }
.sidebar {grid-area: sidebar; }
.main    {grid-area: main; }
.footer  {grid-area: footer; }

➡️ 페이지 레이아웃용으로 최고

6️⃣ 반응형에서 Grid (auto-fit / minmax) (안 배움)


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

화면이 넓으면 여러 칸

좁아지면 자동으로 줄바꿈

💡 미디어 쿼리 없이 반응형 카드 레이아웃 가능

2. 실습

1️⃣ `grid-template-columns`

1) `grid-template-columns: auto auto`


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

2) `grid-template-columns: auto auto auto`


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto auto;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

3) `grid-template-columns: 1fr 1fr 1fr`


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

4) `grid-template-columns: 1fr 5fr 1fr`


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

➡️ 가로길이가 100px이라면 1fr은 1/7의 크기를 가지고, 5fr은 5/7의 크기를 가지고, 1fr은 1/7의 크기를 가짐

2️⃣ gap

1) `gap` 추가


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
        /* 가로길이가 100이라면 (100 * 1/7) (100 * 5/7) (100 * 1/7) */
        gap: 10px;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

2) `column-gap`


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
        /* 가로길이가 100이라면 (100 * 1/7) (100 * 5/7) (100 * 1/7) */
        column-gap: 10px;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

3️⃣ `span`

1) `grid-column-start` / `grid-column-end` (가장 기본)

①


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto auto auto;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
      .grid_item:last-child {
        grid-column-start: 1;
        grid-column-end: 3;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

②


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto auto auto;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
      .grid_item:last-child {
        grid-column-start: 1;
        grid-column-end: 4;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

③


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto auto auto;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
      .grid_item:last-child {
        grid-column-start: 4;
        grid-column-end: 5;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

➡️ 강사님은 이 방법 비추천

2) `grid-column: n/n;`

①


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto auto auto;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
      .grid_item:last-child {
        /* grid-column-start: 4; */
        /* grid-column-end: 5; */
        grid-column: 3/5;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

②


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto auto auto;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
      .grid_item:last-child {
        /* grid-column-start: 4; */
        /* grid-column-end: 5; */
        grid-column: 1/5;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

4️⃣ repeat

1) `grid-template-columns: repeat()`

①


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(9, 1fr);
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

➡️ display: flex; 와 동일

②


<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(9, 50px);
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

Contents

6. Grid Layout 기본

1. Grid

1️⃣ Grid 란?

2️⃣ Grid 기본 구조

1) Grid 컨테이너 만들기

2) 열(column) 정의 : grid-template-columns

3) 행(row) 정의 : grid-template-rows

3️⃣ 가장 많이 쓰는 패턴

1) repeat()

2) gap (아이템 사이 간격)

4️⃣ Grid 아이템 배치 방법

1) 자동 배치 (기본)

2) 위치 직접 지정

3) span 사용

5️⃣ 영역 이름으로 배치 (실무 핵심) (안 배움)

1) grid-template-areas

6️⃣ 반응형에서 Grid (auto-fit / minmax) (안 배움)

2. 실습

1️⃣ grid-template-columns

1) grid-template-columns: auto auto

2) grid-template-columns: auto auto auto

3) grid-template-columns: 1fr 1fr 1fr

4) grid-template-columns: 1fr 5fr 1fr