CSS 그리드 레이아웃 모듈

Header
Menu
Main
Right
Footer

직접 시도해보세요

그리드 레이아웃

CSS 그리드 레이아웃 모듈（CSS Grid Layout Module）은 행과 열을 포함한 기반 그리드 레이아웃 시스템을 제공하며, 플로팅과 정위치를 사용하지 않고 웹 페이지 디자인을 더 쉽게 만듭니다。

브라우저 지원

모든 현대 브라우저는 그리드 속성을 지원합니다。

57.0 16.0 52.0 10 44

그리드 요소

그리드 레이아웃은 부모 요소와 하나 이상의 자식 요소로 구성됩니다。

예제

<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>
1
2
3
4
5
6
7
8
9

직접 시도해보세요

Display 속성

HTML 요소의 display 속성이 설정됩니다 grid 또는 inline-grid 이렇게 되면 그리드 컨테이너가 됩니다。

예제

.grid-container {
  display: grid;
}

직접 시도해보세요

예제

.grid-container {
  display: inline-grid;
}

직접 시도해보세요

그리드 컨테이너의 모든 직접 자식 요소는 자동으로 그리드 항목이 됩니다。

그리드 열（Grid Columns）

그리드 항목의 수직선은 열로 불립니다。

그리드 행（Grid Rows）

그리드 항목의 수평선은 행으로 불립니다。

그리드 간격（Grid Gaps）

각 열/행 간의 간격을 간격이라고 합니다。

간격 크기를 조정하기 위해 다음 속성 중 하나를 사용할 수 있습니다：

  • grid-column-gap
  • grid-row-gap
  • grid-gap

예제

grid-column-gap 속성은 열 간의 간격을 설정합니다：

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

직접 시도해보세요

예제

grid-row-gap 속성은 행 간의 간격을 설정합니다：

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

직접 시도해보세요

예제

grid-gap 속성은 grid-row-gap과 grid-column-gap 속성의 줄임말 속성입니다：

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

직접 시도해보세요

예제

grid-gap 속성은 행 간격과 열 간격을 하나의 값으로 설정하는 데 사용될 수 있습니다：

.grid-container {
  display: grid;
  grid-gap: 50px;
}

직접 시도해보세요

그리드 행(Grid Lines)

열 사이의 선은 열선(column lines)이라고 합니다.

행 사이의 선은 행선(row lines)이라고 합니다.

그리드 컨테이너에 그리드 아이템을 배치할 때, 행 번호를 참조하세요:

예제

그리드 아이템을 열선 1에 배치하고, 열선 3에서 끝내세요:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

직접 시도해보세요

예제

그리드 아이템을 행선 1에 배치하고, 행선 3에서 끝내세요:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

직접 시도해보세요