CSS Grid Auto-Flow: Row, Column, and Dense Explained

KandZ- Tuts

2 min read

·

Oct 15, 2026

--

Listen

Share

CSS grid-auto-flow is confusing.

You set dense and items jump around. You set row and columns behave unexpectedly. You reload the browser fifty times trying to understand the placement.

Let’s break down how auto-placement actually works.

What is grid-auto-flow?

grid-auto-flow controls how the grid places items that don't have explicit positions. When you don't define grid-row or grid-column for an item, the browser uses auto-placement — and grid-auto-flow decides the direction and density of that placement.

The Default: Row

css

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

With row, items fill each row from left to right before moving to the next row. This is the default behavior and works for most layouts.

The Alternative: Column

css

css.container {
  grid-auto-flow: column;
}

With column, items fill each column from top to bottom before moving right. This is useful for vertical layouts like masonry columns.

The Tricky One: Dense

css

css.container {
  grid-auto-flow: dense;
}

Without dense, if a large item can't fit in the next available cell, the algorithm leaves a gap and moves on.

With dense, the algorithm backfills smaller items into those gaps. The result is a more tightly packed grid.

Combining Values

You can combine row or column with dense:

css

cssgrid-auto-flow: row dense;
grid-auto-flow: column dense;

A Practical Example

css

css.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 10px;
}

.item-large {
  grid-column: span 2;
  grid-row: span 2;
}

Without dense, the large item might leave a gap. With dense, smaller items fill that gap.

The Accessibility Problem

dense can change the visual order of items. The DOM order stays the same, but the visual order changes.

This is a problem for:

• Screen readers — they follow DOM order, not visual order
• Keyboard navigation — tab order follows DOM order
• Cognitive load — users expect visual order to match source order

Use dense carefully. It's powerful, but it has real costs.

When to Use Each Value

• row — most layouts. Predictable, accessible.
• column — vertical flow, masonry columns.
• dense — image galleries, dashboards, anywhere you need to fill all gaps.

Prototyping Visually

If you want to see how row, column, and dense position items without writing code and reloading the browser, I built a free CSS Grid Auto-Flow Playground. It shows the placement in real-time and exports clean CSS.

Try it here

100% client-side. Nothing uploaded.

Press enter or click to view image in full size

What’s your experience with grid-auto-flow: dense? Do you use it, or do you avoid it for accessibility reasons? Let me know in the comments.