> 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-replacement-packing.md).

# Grid 자동 배치 패킹 설정

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

`grid-auto-flow` 값을 `dense`로 설정하면 자동 배치 알고리즘(auto placement algorithm)에 따라 **밀집하게 빈 공간을 채우는 모드가 발동**됩니다.

**예시**

```css
.grid-container {
  display: grid;
  /* 자동 배치(Auto Placement) 패킹(Packing) 모드 설정
   * 자동 배치 알고리즘에 따라 `밀집한` 모드로 작동시켜 봅니다. */
  grid-auto-flow: dense;
}

.item.is-double {
  z-index: 10;
  box-shadow: 0 4px 2px #8CD2E2;
  grid-column-end: span 2;
  grid-row-end: span 2;
}
.item.is-triple {
  z-index: 100;
  box-shadow: 0 4px 2px #A9C3E7;
  grid-column-end: span 3;
  grid-row-end: span 3;
}
.item.is-tall {
  grid-row-end: span 2;
}
.item.is-tall-4 {
  grid-row-end: span 4;
}
```

**데모**

Grid 자동 배치 패킹 결과

![](/files/-LH8GI3PJXPN59PYnoen)

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

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

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

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

![](/files/-LH8GeuyTM8DTPYTgrSx)

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