Learn CSS Grid Lanes

Watch on Apple Developer

TL;DR

What Grid Lanes solves

CSS Grid Lanes targets layouts commonly called masonry, waterfall, or brick-wall layouts. These are useful when items have mixed dimensions or aspect ratios and should keep their natural proportions while packing into the available space.

Flexbox flows items along one axis and wraps, while Grid creates two-dimensional cells that can leave empty areas for uneven content. Grid Lanes sits between them: it defines lanes in one direction and lets the other direction size naturally.

• Use column lanes for vertical waterfall or masonry layouts.
• Use row lanes for horizontal brick-wall layouts.
• Use it for images, text, cards, or mixed content; items are not required to share the same size or aspect ratio.
• The placement algorithm normally puts each item into the lane whose current end is closest to the start of the container.

Create a Grid Lanes container

A basic Grid Lanes layout starts with display: grid-lanes, a track definition for one axis, and an optional gap. The example shown divides the container into three equal columns using fr units.

• grid-template-columns creates vertical lanes for a waterfall layout.
• grid-template-rows creates horizontal lanes for a brick-wall variation.
• Grid Lanes structures one direction at a time; choose columns or rows, not both.

Three-column waterfall layout

Creates three equal column lanes and spaces items with the same gap syntax used by CSS Grid.

.container {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Brick-wall variation

Swaps columns for rows so items flow horizontally into row lanes.

.container {
  display: grid-lanes;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

Adapt lane sizing to the container

Grid Lanes supports familiar CSS track sizing. You can use equal fractions, unequal fractions, auto-fill, minmax(), and repeating track patterns to adapt to different viewport widths and content needs.

• Use unequal fr values when one lane should be wider than others.
• Use repeat(auto-fill, minmax(...)) when the browser should choose how many lanes fit.
• Use repeating patterns to mix narrow and wide lanes without manually enumerating every column.

Unequal columns

Makes the center lane twice as wide as the side lanes.

.container {
  display: grid-lanes;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}

Responsive auto-filled lanes

Creates as many lanes as fit, with each lane at least 200px and able to grow to share available space.

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

Control individual items and nested layouts

Grid Lanes lets individual items use existing Grid placement syntax. Items can span multiple column lanes or be placed into a specific column range, while Grid Lanes still chooses their row position.

Nested layouts can combine Grid Lanes, regular Grid, and subgrid. In the session's recipe-card example, a card spans two columns and then uses subgrid so its internal image and text align with the parent lanes.

• Use grid-column: span 2 to make an item span two column lanes.
• Use explicit column placement such as grid-column: 2 / span 2 to choose the starting column and span.
• Rows remain automatic in a column-lane layout; Grid Lanes decides the row position.
• Nested regular Grid inside Grid Lanes, or Grid Lanes inside Grid, can be combined with familiar Grid syntax.

Span an item across two columns

Gives a selected item more horizontal space while the surrounding layout adjusts.

.container {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.item {
  grid-column: span 2;
}

Use subgrid inside a spanning item

Lets nested content participate in the parent column structure while the item spans two lanes.

.container {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.item {
  display: grid-lanes;
  grid-template-columns: subgrid;
  grid-column: span 2;
}

Tune ordering with flow-tolerance and debug in Web Inspector

Because Grid Lanes normally places each item in the shortest lane, the visual order can diverge from DOM and keyboard navigation order when lane heights differ only slightly. That can create confusing accessibility behavior.

flow-tolerance adjusts how strictly the browser follows the shortest-lane rule. With tolerance, a later item may prefer an earlier lane when lane heights are close enough, improving left-to-right or top-to-bottom visual continuity for some layouts.

Safari Web Inspector supports Grid Lanes overlays that show lane lines, row and column lines, gaps, and order numbers over items, which is useful when tuning flow-tolerance or investigating unexpected placement.

• Default flow-tolerance is 1em.
• Increase or tune the value for content where small height differences cause undesirable visual ordering.
• Use the Web Inspector overlay to inspect placement order and lane geometry.

Tune flow tolerance

Loosens the shortest-column rule so lanes with similar heights can preserve a more intuitive visual flow.

.container {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flow-tolerance: 2.1em;
}

Resources

• WebKit.org - CSS Grid Lanes Field Guide
• WebKit.org - Report issues to the WebKit open-source project
• Submit feedback

Related Sessions

• Rediscover the HTML select element
• What's new in WebKit for Safari 27

Unofficial, not associated with Apple. By