The Auto-Flowing Powers of Grid's Dense Keyword

When Grid's Auto-Placement Leaves Gaps

Consider a typical news homepage: a collection of cards, some more prominent than others. A featured story might need to stretch across two columns, while the rest are standard-sized cells. CSS Grid is a natural fit here—it works in two dimensions and, by default, flows items into the grid automatically.

Set display: grid on the parent and nothing else, and each child gets an equal share of the available columns and rows. No explicit positioning needed. That's handy when content is unpredictable, like when the number of articles varies day to day or ads appear in some sessions but not others. Grid adapts, slotting items into a tidy arrangement.

That works well when every item occupies a single cell. But the moment an item spans multiple rows or columns, things can get awkward. Returning to the featured-article idea, suppose we want it to span the last two columns of a row.

.article--featured {
  grid-column: 2 / span 2;
}

With six or eight articles on a given day, Grid's auto-placement should—in theory—route items around that larger block. In practice, it doesn't. The featured article is placed wherever there's enough room for its span, which is often on a later row, leaving an empty cell behind it. The preceding items in the source order fill their spots as expected, and the layout ends up with an unintentional hole.

<div class="articles">
  <div class="article">1</div>
  <div class="article">2</div>
  <div class="article">3</div>
  <div class="article--featured">4</div>
  <div class="article">5</div>
  <div class="article">6</div>
</div>

The root cause: Grid respects the explicit span request and places the featured article only after it finds enough available space—typically the second row, with a gap left before it because items earlier in the HTML filled their natural positions first. The remaining grid children then flow into whatever cells are left, not around the featured piece as intended.

There's a way to force Grid to ignore source order and backfill that empty space. The solution is the auto-flow: dense keyword on the grid container.

.articles {
  display: grid;
  grid-auto-flow: dense;
  grid-gap: 1em;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 1fr);
}

With dense packing enabled, the browser flows the next available item into earlier gaps instead of leaving them empty. The featured article keeps its intended span, and all other content arranges itself neatly around it, regardless of how many articles appear that day.