HTML & CSS reference

grid-auto-flow

How the grid places items that have no explicit position.

Syntax

grid-auto-flow: value;

Values

Parameter	Type	Description
row	keyword	Fills row by row (the default).
column	keyword	Fills column by column, adding new columns.
dense	keyword	Fills earlier holes with smaller items that come later.

Examples

dense fills the gaps left by wide items:

<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 6px; }
  .grid div { padding: 8px; background: lightskyblue; }
  .wide { grid-column: span 2; background: gold !important; }
</style>
 
<div class="grid">
  <div>1</div><div class="wide">2 wide</div><div class="wide">3 wide</div><div>4</div><div>5</div>
</div>

Notes

dense changes the visual order of items, which can confuse keyboard users. It suits galleries where the order does not matter.

In the tutorial

Grid — CSS Grid — columns and rows, the fr unit, the repeat and minmax functions, gaps and a responsive grid without media queries.

Thanks for reading!