1
Ceramic glaze
- Published at
CSS display: grid-lanes
Next card goes in the shortest column — Pinterest, not a newspaper.
Unsupported Browser
Your browser does not support display: grid-lanes. The fallback uses columns:. Try Safari 26.4+.
What does it do?
display: grid-lanes packs mixed-height items so the next one fills the shortest column — no empty row gaps. Column count still comes from grid-template-columns. The snippet above is the whole API — made in Snipsco.
columns vs grid-lanes
columns: is a newspaper: items fill down the first column, then the next. Tab order follows that. grid-lanes is Pinterest: items fill across, always into the shortest column, so tab order stays with what’s on screen.
Use grid-lanes for card and image boards. Use columns: for actual text columns, and as the fallback until grid-lanes is everywhere.
Fallback
Start with columns: and break-inside: avoid on children. Inside @supports (display: grid-lanes), set columns: unset and switch to display: grid-lanes.
.blog {
columns: 250px;
gap: 1rem;
}
.blog > * {
break-inside: avoid;
}
@supports (display: grid-lanes) {
.blog {
columns: unset;
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
Pinterest board
interactiveThis browser has no grid-lanes. You’re seeing the columns: fallback. Try Safari 26.4+.
2
Trail hut
3
Night market
4
Linen chair
5
Studio light
6
Coast path
7
Ramen bowl
8
Window plant
9
Film still
10
Tile sample
11
Desk setup
12
Wool throw
.blog {
columns: 180px;
gap: 1rem;
}
.blog > * {
break-inside: avoid;
}