> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/css-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/css-grid/css-grid-guide/grid-auto-flow.md).

# Grid 자동 흐름 설정

## 사용법 <a href="#usage" id="usage"></a>

#### 그리드 자동 흐름 설정 <a href="#setting" id="setting"></a>

그리드에 명시적으로 배치(레이아웃) 되지 않은 아이템이 있을 경우, 자동 배치 알고리즘이 실행되어 자동으로 배치 되도록 설정할 수 있습니다. 속성 값에 따라 자동 배치 알고리즘 작동 방식이 달라집니다.

![](/files/-LH8Bq7Ka4R5gMj1X0YF)

| **속성**           | **값**    | **비고** |
| ---------------- | -------- | ------ |
| `grid-auto-flow` | `row`    | 기본 값   |
|                  | `column` |        |
|                  | `dense`  |        |

**값**

| **값**    | **설명**                                                                  |
| -------- | ----------------------------------------------------------------------- |
| `row`    | 각 행을 차례로 채우고 필요에 따라 새 행을 추가하는 자동 배치 알고리즘                                |
| `column` | 각 열을 차례로 채우고 필요에 따라 새 열을 추가하는 자동 배치 알고리즘                                |
| `dense`  | <p>배치 중 나중에 크기가 작은 아이템이 존재할 경우, 그리드 영역 앞부분의 <br>남은 공간에 자동 배치하는 알고리즘</p> |

**예시**

**HTML 마크업**

```markup
<section class="grid-container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>
```

**CSS 스타일**

5행 2열 그리드를 생성한 후, 자동 배치 알고리즘 값을 `row`로 설정합니다. (기본 값이라 생략해도 무방)

```css
.grid-container {
  display: grid;
  grid-template: repeat(5, 60px) / repeat(2, 30px);
  grid-auto-flow: row;
}
```

`.item-a`, `.item-e` 두 아이템에 행/열 배치를 설정합니다.

```css
.item-a {
  grid-row: 1 / 3;
  grid-column: 1;
}

.item-e {
  grid-row: 1 / 3;
  grid-column: 5;
}
```

결과는 다음과 같이 그려집니다.

`grid-auto-flow` 값이 행(`row`)이기에 별도로 배치 설정을 하지 않은 `.item-b`, `.item-c`, `.item-d` 는 행 축에 따라 자동 배치됩니다.

<div align="left"><img src="/files/-LH8BPsCwRwUwKn4i-lC" alt=""></div>

자동 배치 알고리즘 설정을 행에서 열로 변경하면, 배치 설정이 되지 않은 아이템은 모두 열에 맞춰 자동 배치됩니다.

```css
.grid-container {
  ...
  grid-auto-flow: column;
}
```

결과를 살펴보세요. 별도로 배치 설정을 하지 않은 `.item-b`, `.item-c`, `.item-d`는 열 축에 따라 자동 배치됩니다.

<div align="left"><img src="/files/-LH8BYyFtxciXhPeqls2" alt=""></div>

## 실습 <a href="#practice" id="practice"></a>

{% embed url="<https://codepen.io/yamoo9/pen/MGwjPM>" %}

## 레퍼런스 <a href="#reference" id="reference"></a>

![](/files/-LH8Bw8gRlbx5xA-ncyN)

{% embed url="<https://www.w3.org/TR/css-grid-1/#grid-auto-flow-property>" %}
w3.org/TR/css-grid-1/#grid-auto-flow-property
{% endembed %}