CSS 그리드 레이아웃
============

**CSS 그리드 레이아웃(Grid Layout)**은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.

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

기본 예제
-----

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

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

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

### HTML


```html
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
```

### CSS


```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;
}
```

참고
--

### CSS 프로퍼티

* `grid-template-columns`
* `grid-template-rows` (en-US)
* `grid-template-areas` (en-US)
* `grid-template` (en-US)
* `grid-auto-columns` (en-US)
* `grid-auto-rows` (en-US)
* `grid-auto-flow` (en-US)
* `grid` (en-US)
* `grid-row-start` (en-US)
* `grid-column-start` (en-US)
* `grid-row-end` (en-US)
* `grid-column-end` (en-US)
* `grid-row` (en-US)
* `grid-column` (en-US)
* `grid-area` (en-US)
* `grid-row-gap` (en-US)
* `grid-column-gap` (en-US)
* `grid-gap` (en-US)
### CSS 함수

* `repeat()` (en-US)
* `minmax()` (en-US)
* `fit-content()` (en-US)
### CSS 데이터 타입

* `<flex>` (en-US)
### 용어집 목록

* Grid
* Grid Lines
* Grid Tracks
* Grid Cell
* Grid Area
* Gutters
* Grid Axis
* Grid row (en-US)
* Grid column
가이드
---

* 그리드 레이아웃의 기본 개념
* 그리드 레이아웃과 다른 레이아웃 방법과의 관계
* 라인을 기준으로 한 아이템 배치
* 그리드 템플릿 영역
* 이름이 주어진 그리드 라인을 이용한 레이아웃
* Auto-placement in CSS Grid Layout (en-US)
* Box alignment in CSS Grid Layout (en-US)
* CSS Grid, Logical Values and Writing Modes (en-US)
* CSS Grid Layout and accessibility (en-US)
* CSS Grid and progressive enhancement (en-US)
* Realising common layouts using CSS Grid (en-US)
외부 문서
-----

* Examples from Jen Simmons
* Grid by Example - a collection of usage examples and video tutorials
* Codrops Grid Reference
* Firefox DevTools CSS Grid Inspector (en-US)
* CSS Grid Playground
* Grid Garden - A game for learning CSS grid
안내서
---

* 그리드 레이아웃의 기본 개념
* 다른 레이아웃 방법과의 관계
* 라인을 기준으로 한 아이템 배치
* 그리드 템플릿 영역
* 이름이 주어진 그리드 라인을 이용한 레이아웃
* Auto-placement in grid layout (en-US)
* Box alignment in grid layout (en-US)
* Grids, logical values and writing modes (en-US)
* CSS Grid Layout and Accessibility (en-US)
* CSS Grid Layout and Progressive Enhancement (en-US)
* Realizing common layouts using grids (en-US)
* Subgrid (en-US)
* Masonry layout (en-US) 
Experimental
명세서
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |

같이 보기
-----

* Glossary terms:
    + Grid
    + Grid lines
    + Grid tracks
    + Grid cell
    + Grid area
    + Gutters
    + Grid axis
    + Grid row (en-US)
    + Grid column
* Grid by Example - A collection of usage examples and video tutorials
* CSS Grid Reference - Codrops
* CSS Grid Inspector - Firefox DevTools
* CSS Grid Playground
* CSS Grid Garden - A game for learning CSS grid