Grid 자동 배치 패킹 설정

사용법

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

예시

.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 자동 배치 패킹 결과

실습

레퍼런스

CSS Grid Layout Module Level 1

w3.org/TR/css-grid-1/#valdef-grid-auto-flow-dense