CSS Grid Lanes

Experimental Reference ↗

Grid Lanes are the current native masonry direction for CSS Grid. The strict axis defines tracks; the other axis packs mixed-size items into the available lanes.

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

This is experimental and not Baseline. Put it behind @supports; unsupported browsers can use ordinary Grid auto-placement.