# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/css-grid/css-grid-guide/grid-auto-flow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.