path: root/files/ko/web/css/css_grid_layout/index.html

---
title: CSS 그리드 레이아웃
slug: Web/CSS/CSS_Grid_Layout
tags:
  - CSS
  - Grid Layout
  - Grids
  - 개요
  - 그리드
  - 그리드 레이아웃
  - 레이아웃
  - 참고
translation_of: Web/CSS/CSS_Grid_Layout
---
<p><strong>CSS 그리드 레이아웃(Grid Layout)</strong>은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.</p>

<p>테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다.</p>

<h2 id="Basic_Example" name="Basic_Example">기본 예제</h2>

<p>아래 예제는 3개의 세로 열 트랙으로 이루어졌으며, 저절로 채워지며 생성되는 가로 행 트랙은 높이가 최소 100픽셀 이상, 콘텐츠 최대치까지 자동으로 늘어나는 구조의 그리드를 보여줍니다. 각 아이템은 그리드 라인을 기준으로 배치되었습니다.</p>

<div id="example">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper &gt; div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}</pre>
</div>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;div class="one"&gt;One&lt;/div&gt;
  &lt;div class="two"&gt;Two&lt;/div&gt;
  &lt;div class="three"&gt;Three&lt;/div&gt;
  &lt;div class="four"&gt;Four&lt;/div&gt;
  &lt;div class="five"&gt;Five&lt;/div&gt;
  &lt;div class="six"&gt;Six&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
</pre>

<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
</div>

<h2 id="참고">참고</h2>

<h3 id="CSS_프로퍼티">CSS 프로퍼티</h3>

<div class="index">
<ul>
 <li>{{cssxref("grid-template-columns")}}</li>
 <li>{{cssxref("grid-template-rows")}}</li>
 <li>{{cssxref("grid-template-areas")}}</li>
 <li>{{cssxref("grid-template")}}</li>
 <li>{{cssxref("grid-auto-columns")}}</li>
 <li>{{cssxref("grid-auto-rows")}}</li>
 <li>{{cssxref("grid-auto-flow")}}</li>
 <li>{{cssxref("grid")}}</li>
 <li>{{cssxref("grid-row-start")}}</li>
 <li>{{cssxref("grid-column-start")}}</li>
 <li>{{cssxref("grid-row-end")}}</li>
 <li>{{cssxref("grid-column-end")}}</li>
 <li>{{cssxref("grid-row")}}</li>
 <li>{{cssxref("grid-column")}}</li>
 <li>{{cssxref("grid-area")}}</li>
 <li>{{cssxref("grid-row-gap")}}</li>
 <li>{{cssxref("grid-column-gap")}}</li>
 <li>{{cssxref("grid-gap")}}</li>
</ul>
</div>

<h3 id="CSS_함수">CSS 함수</h3>

<div class="index">
<ul>
 <li>{{cssxref("repeat", "repeat()")}}</li>
 <li>{{cssxref("minmax", "minmax()")}}</li>
 <li>{{cssxref("fit-content", "fit-content()")}}</li>
</ul>
</div>

<h3 id="CSS_데이터_타입">CSS 데이터 타입</h3>

<div class="index">
<ul>
 <li>{{cssxref("&lt;flex&gt;")}}</li>
</ul>
</div>

<h3 id="용어집_목록">용어집 목록</h3>

<div class="index">
<ul>
 <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
 <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li>
 <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li>
 <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li>
 <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li>
 <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
 <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
 <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li>
 <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li>
</ul>
</div>

<h2 id="가이드">가이드</h2>

<div class="index">
<ul>
 <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li>
 <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">그리드 레이아웃과 다른 레이아웃 방법과의 관계</a></li>
 <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li>
 <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li>
 <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li>
</ul>
</div>

<h2 id="외부_문서">외부 문서</h2>

<ul>
 <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li>
 <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li>
 <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
 <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li>
 <li><a href="http://cssgridgarden.com">Grid Garden</a> - A game for learning CSS grid</li>
</ul>

<h2 id="표준_문서">표준 문서</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Grid') }}</td>
   <td>{{ Spec2('CSS3 Grid') }}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<section id="Quick_links">
<ol>
 <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
 <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
 <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li>
 <li data-default-state="open"><a href="#"><strong>가이드</strong></a>
  <ol>
   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li>
   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li>
   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li>
   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li>
   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a>
  <ol>
   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>용어집</strong></a>
  <ol>
   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
  </ol>
 </li>
</ol>
</section>