grid-auto-flow: dense for Packed Layouts

Auto-placement is one of CSS Grid's best features: list the items, define the tracks, and the browser puts each item into the next free cell. Add some items that span two columns or two rows — a featured card, a wide photo — and a problem appears. When a spanning item does not fit in the remaining space of a row, it wraps to the next row and leaves a hole behind it. The default algorithm never goes back to fill that hole. grid-auto-flow: dense changes that: the browser backfills earlier gaps with later, smaller items, producing a tightly packed grid. This page explains both algorithms, shows dense packing in action, and covers the accessibility cost that decides when to use it. It belongs to CSS Grid & Subgrid Layouts in the Mastering Container Queries & Responsive Layouts guide.

Sparse placement: the cursor only moves forward

By default, grid-auto-flow is row — the sparse algorithm. The browser keeps a placement cursor. For each item in source order, it moves the cursor forward until it finds a spot where the item fits, places it, and continues from there. It never moves the cursor backwards. A 2-column-wide item that meets a single free cell at the end of a row skips to the next row, and that single cell stays empty forever, because every later item is placed after the wide one.

Dense placement: search from the start for each item

With grid-auto-flow: dense (or row dense), the algorithm resets the cursor to the start of the grid for every item and places it in the first spot where it fits. Items that fit into earlier holes go there, even though they come later in the source. The result is a packed grid with no gaps, as long as there are small enough items to fill them.

The complete implementation

The demo shows a photo mosaic where some tiles span two columns or two rows. Tick the checkbox to switch between sparse and dense placement and watch the holes disappear.

.mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  grid-auto-rows: 6rem;
  gap: 0.5rem;
  grid-auto-flow: row dense;   /* backfill holes left by spanning tiles */
}

.mosaic__tile--wide { grid-column: span 2; }
.mosaic__tile--tall { grid-row: span 2; }
.mosaic__tile--big  { grid-column: span 2; grid-row: span 2; }

.mosaic__tile img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

Because the tiles are a decorative mosaic whose order does not matter, dense packing gives a better result with no downside. auto-fill with minmax() makes the column count respond to the container width; as it changes, the holes move, and dense placement keeps filling them. Give each image meaningful alt text regardless; a mosaic is decorative in its arrangement, not necessarily in its content.

The key technique: dense trades source order for density

Dense placement's whole effect is to move items out of source order. That is harmless when order carries no meaning and harmful when it does. Screen readers read items in DOM order, and keyboard focus moves in DOM order. In a dense grid, a user tabbing through linked tiles may see focus jump backwards and forwards across the grid as it follows the source order through visually reordered items.

WCAG 1.3.2 (Meaningful Sequence) and 2.4.3 (Focus Order) apply when the sequence affects meaning or operation. A news grid sorted by date, search results, or a step-by-step list must not be densely packed. A tag cloud, a gallery of equivalent photos, or a set of decorative tiles can be. When in doubt, ask whether a user would be confused if the items were read in a different order than they appear; if so, avoid dense packing.

How dense interacts with explicitly placed items

Grid places items in stages. Items with an explicit row and column position go first, and auto-placement then works around them. Items locked to a row but not a column come next, then fully auto-placed items. Dense packing only changes the last stage: it lets auto-placed items fill any cell the explicit items left free, anywhere in the grid. That makes a useful combination. Pin a hero tile to grid-column: 1 / 3; grid-row: 1 / 3, and let dense auto-placement pack every other tile around it without holes.

The interaction also explains a surprise: adding order to items changes their position in the auto-placement sequence, and dense packing then moves them further. Visual order can end up very far from source order. Prefer changing spans or explicit positions over order when a mosaic needs adjusting, so the source remains the best description of what the user will see.

Checking the result

Grid inspectors in Chromium and Firefox DevTools overlay line numbers and area outlines on the grid. With dense packing, turn on the overlay and compare the numbers in each cell with the source order. Labelling tiles with their source index during development, as the demo does, makes the comparison instant and is worth removing only once the layout is settled. For interactive tiles, tab through the grid with the overlay on — any jump against the visual flow is exactly what a keyboard user will experience. If the jumps feel disorienting to you, they will for users too, and the layout should use one of the alternatives above.

Alternatives to dense packing

When order matters but gaps are unwelcome, other approaches keep order and density together:

• Design the spans to fit. If featured items always span two columns in a four-column grid, place them at predictable positions, such as every sixth item, so they land at the start of a row. Or set the column count so that spanning items tile evenly.
• Let the wide item shrink. At narrow container sizes, remove the span with a container query so wide items become normal tiles instead of skipping rows. How to Use Container Queries in Production shows the pattern.
• Place the featured item explicitly. grid-column: 1 / -1 on a hero item puts it on its own full row, which never leaves holes.
• Accept the gaps. A small, occasional gap in an ordered list is far less harmful than a reading order that jumps around.

For a true masonry look — items of varying height stacked without row alignment — see Masonry-Style Layouts With Grid; dense packing still aligns items to row tracks.

Column flow and dense

grid-auto-flow: column dense applies the same logic to column-major placement: items fill each column top to bottom, and dense lets later items move up into earlier gaps. It is useful for vertical timelines of decorative elements and rare otherwise. The same accessibility caveat applies, with the added twist that column-major order already differs from the left-to-right reading order most users expect.

Browser support

grid-auto-flow, including the dense keyword, is part of CSS Grid and is supported wherever grid is: Chrome 57+, Edge 16+, Firefox 52+ and Safari 10.1+. repeat() is supported in Chrome 57+, Edge 16+, Firefox 76+ and Safari 10.1+, and minmax() in Chrome 57+, Edge 16+, Firefox 52+ and Safari 10.1+. Size container queries, used in the alternatives, are supported in Chrome and Edge 105+, Firefox 110+ and Safari 16+.

FAQ

What does grid-auto-flow: dense do? It changes the auto-placement algorithm so that, for each item, the browser searches from the start of the grid for the first gap large enough, instead of only moving forward from the last placed item. Smaller items later in the source can fill holes left earlier.

Why does my grid have empty cells when items span columns? With the default sparse placement, the cursor only moves forward. If a wide item does not fit in the remaining columns of a row, it moves to the next row and leaves the gap behind; later items are placed after it, so the gap stays empty.

Is dense packing an accessibility problem? It can be. Dense placement moves items visually out of source order, while screen readers and keyboard focus follow the DOM. If the order carries meaning or items are interactive, the mismatch can confuse users and fail WCAG meaningful sequence and focus order.

When is dense packing safe to use? When the order of items does not matter and they are not focusable in a meaningful sequence, such as a decorative photo mosaic or a tag cloud. For ordered content like articles or search results, accept the gaps or size items to avoid them.

Related

• CSS Grid & Subgrid Layouts — the parent guide.
• auto-fit and minmax() Responsive Grids — the column tracks used here.
• Masonry-Style Layouts With Grid — when rows should not align.
• Overlapping Elements With Grid Stacking — explicit placement in the same grid.