Apply display: grid-lanes to a layout container. Then define columns or rows. The children pack into grid lanes automatically.

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

Defining columns creates a vertical waterfall. Tab order flows back and forth across the page. Each item is placed wherever puts it closest to the top. Additional items can be lazy-loaded at the bottom.

Defining rows creates a horizontal brick layout. Tab order flows up and down. Each item is placed wherever puts it closest to the inline start edge.

One fractional unit. Divides available space proportionally. 1fr 2fr 1fr gives the middle track twice the width.

grid-template-columns: 1fr 2fr 1fr;

Use any CSS unit to define a fixed size. The classics: px, em, rem. Newer ones: ch (a character’s width), lh (a line’s height). Plus powerful viewport and container units. Pick the unit that fits the job.

grid-template-columns: 12ch 1fr 20rem;

The % unit resolves to percentage of the container’s size. It works — but fr units are usually a better fit, since they account for gap and % doesn’t. Plus you won’t have to worry about adding up to 100%.

grid-template-columns: 25% 75%;

Sized by content. Stretches to fill remaining space when there’s room.

grid-template-columns: auto 1fr;

min-content makes a box the smallest it can be without overflow. max-content makes a box the biggest it can be, sized to its content.

grid-template-columns: max-content 1fr;

grid-template-columns: min-content 1fr;

Shrink-wrap with a ceiling. When there’s less content, fit-content behaves just like max-content. When there’s more content, it doesn’t grow beyond the declared size.

grid-template-columns: fit-content(300px) 1fr;

A flexible track sized between the declared minimum and maximum size. Using minmax(200px, 1fr) creates a track that’s never smaller than 200px, and grows to share any remaining space. When there’s more space, the browser automatically adds more tracks. Less space? Fewer tracks. No media or container queries needed!

grid-template-columns: minmax(200px, 1fr);

Shorthand to repeat track patterns. These two lines are identical:

grid-template-columns: repeat(3, 1fr);

grid-template-columns: 1fr 1fr 1fr;

Both automatically choose the number of tracks. auto-fill creates all tracks that will fit, even if empty. auto-fit creates tracks, but not more than there are items, so there are no empty tracks.

Want flexible equal-width columns, where additional columns appear and disappear automatically as space allows? Use this, adjusting the 120px length to your needs:

grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

Or use this to ensure that when the space available is extra narrow (less than 120px), the single column does not overflow:

grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));

Grid Lanes packs each item into whichever lane has the most empty space. When lanes are nearly equal and a one-pixel difference matters, the visual order gets scrambled for no good reason. Use flow-tolerance to declare “how close” matters. Anything less is considered a tie, and content flows in writing mode order. This better syncs visual order with tab order. The best value depends on your content’s sizes — experiment and see. Default is 1em.

flow-tolerance: 4lh;

One value for uniform spacing. Two values for different row-gap and column-gap. Works just like CSS Grid.

gap: 1rem 2rem;

Stretch an item across multiple tracks. Great for featured content.

.featured {
  grid-column: span 2;
}

.featured {
  /* grid-column: span 2; */
}

Pin an item to a specific track.

.item-1 {
  grid-column: 3;
}

.item-1 {
  /* grid-column: 3; */
}

Grid Lanes reorders items visually for tighter packing, but the DOM order stays intact. Keyboard navigation, screen readers, and find-on-page all follow the original source order.

Spanning and explicit placement can pull items further from their source position. The visual reading order may diverge from the tab order — so author your HTML in the sequence you want users to encounter it.

Use @supports to layer Grid Lanes on top of a simpler fallback. Browsers that don't support it still get a reasonable layout.

@supports not (display: grid-lanes) {
  ul { 
    columns: 3; 
  }
}
@supports (display: grid-lanes) {
  ul {
    display: grid-lanes;
    grid-template-columns: repeat(3, 1fr);
  }
}

To switch between Waterfall and Brick layout direction, be sure to unset the original track definition. There are many ways to do so. Here’s one:

.container {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (width < 500px) {
  .container {
    grid-template-columns: unset;
    grid-template-rows: 1fr 1fr 1fr;
  }
}