CSS Grid Lanes: masonry guide and playground

Educational guide to CSS Grid Lanes

Pack content without forcing equal rows

An image or card gallery can have different heights while sharing columns. Grid Lanes provides that masonry arrangement in CSS: learn how pieces are distributed, when to use it, and how to keep a useful result without support.

Back to playground

Mental model

Define tracks on one axis and let pieces stack on the other. Each card does not have to fill a shared grid of rows and columns.

Two columns, no shared rowsStatic conceptual diagram, independent of browser support. Numbers represent source order; the recipe provides the native test.

The two lanes set the available width for each piece.
Pieces 1 and 2 have different heights; 3 can start before 2 ends.
Sequence 1–6 switches between lanes; it does not read a whole column before moving to the next.

The grid axis contains the lanes, sized with familiar Grid syntax such as repeat(), minmax(), and fr. The stacking axis lets each piece keep the size its content needs.

Auto-placement processes pieces in order and looks for a position near the start among available lanes, considering their occupied space and tolerance. A short card leaves room for the next without waiting for the tallest card in a shared row.

display: grid-lanes creates a block-level container; inline-grid-lanes creates an inline-level one. This difference affects the outer box; it does not turn the algorithm into a Flexbox row.

Distribution, orientation, and spans

Choose the axis that needs tracks. In a horizontal writing mode, columns produce a vertical waterfall and rows a horizontal brick layout.

grid-template-columns defines waterfall lanes. For brick, use grid-template-rows and leave grid-template-columns at none; keeping a column template from the previous layout can preserve an unexpected orientation.

In the recipe, repeat(auto-fit, minmax(min(12rem, 100%), 1fr)) creates responsive tracks. The inner min() allows a single narrow lane without overflowing the container. The lane count depends on available space and the gap.

grid-column places or spans a piece in waterfall; grid-row serves that purpose in brick. span 2 occupies two lanes but does not set a height. Negative lines count from the end of the explicit grid. Do not place pieces into imagined rows on the stacking axis.

Placement on the axis with tracks

Snippets for two alternative containers with a .featured piece. Waterfall guarantees two columns for the span; brick guarantees two rows. Add card styling and check brick scrolling in its context.

Placement on the axis with tracks

CSS

@supports (display: grid-lanes) {
  .waterfall {
    display: grid-lanes;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;

    > .featured {
      grid-column: span 2;
    }
  }

  .brick {
    display: grid-lanes;
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    gap: 1rem;
    overflow: auto;

    > .featured {
      grid-row: span 2;
    }
  }
}

Comparisons

These drawings are conceptual diagrams. Choose the layout for the relationships the content must preserve, as well as its visual density.

display: grid-lanes;display: grid;

Grid: alignment on two axes

Grid maintains shared rows and columns for forms, panels, or cards that need alignment. Grid Lanes keeps tracks on just one axis. grid-auto-flow: dense fills gaps between Grid cells but does not create masonry with intrinsic heights.

Explore CSS Grid

display: grid-lanes;columns: 2;

Columns: a fragmented flow

Columns flows content down one column and then into the next. break-inside: avoid helps keep a card together but does not choose the shortest lane. It can be a useful fallback if that reading path works for you; it does not reproduce Grid Lanes distribution.

Explore CSS Columns

A progressively enhanced gallery

Both lists use the same content, with different lengths, and keep real links. The first is the stable base; the second enables Grid Lanes only when the browser recognizes its syntax.

The base uses Grid with start alignment, without equalizing card heights. @supports changes the second list’s display and reuses its tracks and gap. Content stays accessible without JavaScript and needs no height measurement or row-span calculations.

Reference: conventional Grid

01
Align with Grid

When shared rows matter.
Open lab
02
Read with Columns

Long text can flow between columns without becoming a gallery of independent pieces. Reading proceeds down the columns.
Open lab
03
Distribute with Flexbox

A row or column whose content guides space distribution.
Open lab
04
Scroll with snap

If content should advance inside a scrolling area, define that container and its targets first. Scroll adjustment is a separate decision from card packing.
Open lab
05
Frame with border

A border that follows the content’s size.
Open lab
06
Apply a filter

Visual effects change the painted result. Before combining them with layout, check which element receives the filter and which content must stay readable.
Open lab

Real Grid result: each new row starts after the tallest card in the previous row. This list always keeps the fallback layout.

Reference: conventional Grid

HTML

<ul id="lanes-guide-grid" aria-label="Reference gallery with CSS Grid" role="list">
  <li>
    <article>
      <span>01</span>
      <h4>Align with Grid</h4>
      <p>When shared rows matter.</p>
      <a href="/en/css/layouts/grid/">Open lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>02</span>
      <h4>Read with Columns</h4>
      <p>Long text can flow between columns without becoming a gallery of independent pieces. Reading proceeds down the columns.</p>
      <a href="/en/css/layouts/columns/">Open lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>03</span>
      <h4>Distribute with Flexbox</h4>
      <p>A row or column whose content guides space distribution.</p>
      <a href="/en/css/layouts/flexbox/">Open lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>04</span>
      <h4>Scroll with snap</h4>
      <p>If content should advance inside a scrolling area, define that container and its targets first. Scroll adjustment is a separate decision from card packing.</p>
      <a href="/en/css/scroll/scroll-snap/">Open lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>05</span>
      <h4>Frame with border</h4>
      <p>A border that follows the content’s size.</p>
      <a href="/en/css/borders/border/">Open lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>06</span>
      <h4>Apply a filter</h4>
      <p>Visual effects change the painted result. Before combining them with layout, check which element receives the filter and which content must stay readable.</p>
      <a href="/en/css/filters/filter/">Open lab</a>
    </article>
  </li>
</ul>

CSS

:root {
  color-scheme: light dark;
}

#lanes-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  align-items: start;
  gap: 16px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  font-size: 1rem;

  > li {
    min-inline-size: 0;
    padding: 1rem;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    border-radius: 16px;
    corner-shape: squircle;
    background: light-dark(color-mix(in oklch, oklch(0.95 0.008 95) 98%, white), color-mix(in oklch, oklch(0.22 0.024 260) 86%, black));
    overflow-wrap: anywhere;
  }

  article {
    display: grid;
    gap: 0.5rem;

    > * {
      margin: 0;
    }
  }

  h4 {
    font-size: 1.25rem;
  }

  span {
    font-weight: 800;
  }

  a {
    color: light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
    text-decoration: underline;
    text-underline-offset: 0.2em;

    &:focus-visible {
      outline: 3px dashed light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
      outline-offset: 3px;
    }
  }
}

Recipe: Grid Lanes with a Grid fallback

This recipe is using native Grid Lanes.This recipe is using the CSS Grid fallback; it does not demonstrate native masonry.

01
Align with Grid

When shared rows matter.
Open lab
02
Read with Columns

Long text can flow between columns without becoming a gallery of independent pieces. Reading proceeds down the columns.
Open lab
03
Distribute with Flexbox

A row or column whose content guides space distribution.
Open lab
04
Scroll with snap

If content should advance inside a scrolling area, define that container and its targets first. Scroll adjustment is a separate decision from card packing.
Open lab
05
Frame with border

A border that follows the content’s size.
Open lab
06
Apply a filter

Visual effects change the painted result. Before combining them with layout, check which element receives the filter and which content must stay readable.
Open lab

Real result depends on support: Grid Lanes packs pieces into columns; without support, Grid remains. If both lists look identical, check the mode notice and browser support.

Recipe: Grid Lanes with a Grid fallback

HTML

<ul id="lanes-guide-enhanced" aria-label="Progressive Grid Lanes gallery with a Grid fallback" role="list">
  <li>
    <article>
      <span>01</span>
      <h4>Align with Grid</h4>
      <p>When shared rows matter.</p>
      <a href="/en/css/layouts/grid/">Open lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>02</span>
      <h4>Read with Columns</h4>
      <p>Long text can flow between columns without becoming a gallery of independent pieces. Reading proceeds down the columns.</p>
      <a href="/en/css/layouts/columns/">Open lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>03</span>
      <h4>Distribute with Flexbox</h4>
      <p>A row or column whose content guides space distribution.</p>
      <a href="/en/css/layouts/flexbox/">Open lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>04</span>
      <h4>Scroll with snap</h4>
      <p>If content should advance inside a scrolling area, define that container and its targets first. Scroll adjustment is a separate decision from card packing.</p>
      <a href="/en/css/scroll/scroll-snap/">Open lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>05</span>
      <h4>Frame with border</h4>
      <p>A border that follows the content’s size.</p>
      <a href="/en/css/borders/border/">Open lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>06</span>
      <h4>Apply a filter</h4>
      <p>Visual effects change the painted result. Before combining them with layout, check which element receives the filter and which content must stay readable.</p>
      <a href="/en/css/filters/filter/">Open lab</a>
    </article>
  </li>
</ul>

CSS

:root {
  color-scheme: light dark;
}

#lanes-guide-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  align-items: start;
  gap: 16px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  font-size: 1rem;

  > li {
    min-inline-size: 0;
    padding: 1rem;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    border-radius: 16px;
    corner-shape: squircle;
    background: light-dark(color-mix(in oklch, oklch(0.95 0.008 95) 98%, white), color-mix(in oklch, oklch(0.22 0.024 260) 86%, black));
    overflow-wrap: anywhere;
  }

  article {
    display: grid;
    gap: 0.5rem;

    > * {
      margin: 0;
    }
  }

  h4 {
    font-size: 1.25rem;
  }

  span {
    font-weight: 800;
  }

  a {
    color: light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
    text-decoration: underline;
    text-underline-offset: 0.2em;

    &:focus-visible {
      outline: 3px dashed light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
      outline-offset: 3px;
    }
  }

  @supports (display: grid-lanes) {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 16px;
  }
}

The playground also lets you inspect its Columns fallback for waterfall and Grid fallback for brick. This recipe chooses Grid as its base for predictable row-based reading. A fallback is a product decision and can look different without losing content.

Reading order and tolerance

A compact composition does not guarantee an easy path to follow. Check focus with the recipe links and the product’s real cards.

These lists use no order, positive tabindex, or DOM reordering: Tab follows source sequence. Visual positions can jump between lanes. Avoid masonry for steps, rankings, or content with an essential sequence if that path becomes confusing.

flow-tolerance sets how much difference between positions can be treated as a tie. normal resolves to 1em; 0px requires even small differences to count. A larger value can reduce lane changes caused by insignificant differences, at the cost of looser packing.

infinite ignores those differences when distributing across lanes in order, but can cause large jumps on the stacking axis when heights differ greatly. It is not an automatic accessibility fix. Try finite lengths first and check the result.

Mixed spans and explicit placement can make a later piece appear visually before an earlier one. Tolerance does not eliminate all backtracking. Check extreme sizes, loaded images, translated text, mobile, and keyboard navigation before choosing the composition.

Common mistakes

Diagnose the axis, support, and reading path before adjusting each card’s height.

An old demo does not activate

Expected result: See the layout using the syntax taught in this guide.
Cause: The example uses earlier proposals such as grid-template-rows: masonry, or the browser does not recognize display: grid-lanes.
Solution: Check current syntax and support for this browser version, and keep a fallback. An experimental flag with different syntax does not establish support for this recipe.

There are gaps below short cards

Expected result: Pack cards without shared rows.
Cause: The active result is conventional Grid, or each piece’s size has been artificially forced. dense alone does not add masonry.
Solution: Check the displayed mode, let pieces keep their size, and enable Grid Lanes inside @supports when supported.

Brick still grows downward

Expected result: Define rows and stack horizontally.
Cause: A column template remains active after switching orientation.
Solution: Set grid-template-columns: none and define grid-template-rows. Check writing mode and provide contained scrolling if brick needs more width.

A span forces an extra column on mobile

Expected result: Keep content within the available width.
Cause: A piece requires two lanes or a distant line when the responsive layout only has one.
Solution: Return to automatic placement at narrow sizes or apply the span only when enough lanes exist. A flexible minimum alone does not fix explicit placement.

Focus seems to move backward

Expected result: Follow a clear path between pieces.
Cause: Very different sizes, too little tolerance, or mixed spans separate visual order from source order.
Solution: Keep a meaningful DOM, tune a finite tolerance, and simplify spans and placement. If order matters more than density, choose conventional Grid.

Support and compatibility

Check algorithm support, its values, and the evolving draft separately from familiar Grid properties.

Grid Lanes has limited availability. Consulted sources report support from Safari 26.4, including iOS, and no stable support in Chrome, Edge, or Firefox. The Baseline card does not turn one engine’s support into interoperability.

CSS Grid Layout Level 3 remains a draft under development. This guide uses display: grid-lanes and flow-tolerance; older examples with other proposals are not interchangeable. Check each subfeature and target browser before publishing.

@supports (display: grid-lanes) checks acceptance of that declaration. It does not verify every value, the complete algorithm, or the result’s accessibility. If you depend on a particular flow-tolerance value, check it separately and test its behavior.

Visual rhythm

No JavaScript

Flexible tracks

The DOM stays intact

Tolerance

No media queries

Waterfall or brick

Different sizes

Spans and placement

Predictable navigation

Progressive enhancement

Change every control

Grid: alignment on two axes

Columns: a fragmented flow

Align with Grid

Read with Columns

Distribute with Flexbox

Scroll with snap

Frame with border

Apply a filter