CSS: grid-auto-flow

The grid-auto-flow property controls the direction in which Grid places items that do not have an explicit position.

Minimal example

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
  gap: 1rem;
}

.compact { grid-auto-flow: row dense; }

Row placement fills each row before moving to the next. column fills down columns instead. dense may fill earlier gaps, but it can make visual order differ from document order.

Common mistakes

• Do not use dense packing when it makes keyboard or reading order confusing.
• Use explicit placement only when the layout needs it; otherwise let the grid adapt to content.
• Test items of different sizes and content lengths, not only identical cards.