Grid lanesLimited availability
The display: grid-lanes and display: inline-grid-lanes CSS declarations create a layout where items are tightly packed in parallel lanes. Items are placed one by one in the lane that has the most available space. Also known as masonry.
Not yet supported in all major browsers — check the table and provide a fallback.
Browser support
DesktopChrome
✕Not supportedup to 155
Current: 155Edge
✕Not supportedup to 154
Current: 154Firefox
✕Not supportedup to 157
Current: 157Safari
1–26.3Not supported
26.4+Supportedsince Mar 24, 2026
Current: 27MobileChrome Android
✕Not supportedup to 155
Current: 155Firefox Android
✕Not supportedup to 157
Current: 157Safari iOS
1–26.3Not supported
26.4+Supportedsince Mar 24, 2026
Current: 27How to use
Not supported in Chrome, Edge, Firefox, Chrome Android, Firefox Android. Use feature detection below and provide a fallback (or a polyfill) for those browsers.
Example
Full syntax and examples are on MDN — see the links below.
Feature detection
CSS · check before using
@supports (display: grid-lanes) {
/* styles that rely on display: grid-lanes */
}
/* or in JavaScript */
if (CSS.supports("display", "grid-lanes")) {
// use it
}Specification
Usage share
Sub-features
Support for each part of the feature (5). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| display.grid-lanes | ✕ | ✕ | ✕ | 26.4 | ✕ | ✕ | 26.4 |
| display.inline-grid-lanes | ✕ | ✕ | ✕ | 26.4 | ✕ | ✕ | 26.4 |
| flow-tolerance | ✕ | ✕ | ✕ | 26.4 | ✕ | ✕ | 26.4 |
| flow-tolerance.infinite | ✕ | ✕ | ✕ | 26.4 | ✕ | ✕ | 26.4 |
| flow-tolerance.normal | ✕ | ✕ | ✕ | 26.4 | ✕ | ✕ | 26.4 |