display: grid-lanes

Experimental

A display value that packs items into lanes like a masonry wall. Each item drops into the shortest column so you get Pinterest-style layouts without JavaScript measuring.

Quick example

.gallery {
  display: grid;
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Quick facts

Initial value
See display
Inherited
No
Applies to
all elements
Animation type
discrete

Values

grid-lanesinline-grid-lanes

display: grid-lanes Browser Support

Limited availabilityUnknown global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

26.4+
Interop 2027 candidate?See Interop 2027 →
ESC