Grid Lanes (CSS-only masonry)

Safari 26.4 (abril de 2026); Chrome, Edge y Firefox detrás de flags. No es Baseline.

Chrome flagEdge flagSafari 26.4Firefox flag

Un layout tipo masonry en el que los elementos fluyen al carril de columna más corto, expresado con `display: grid-lanes` y la sintaxis conocida de pistas de grid. Sin librerías de masonry en JS.

CSS

.fx-060 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
  gap: 10px;
  font-family: system-ui
}
@supports (display: grid-lanes) {
  .fx-060 {
    display: grid-lanes
  }
}
.fx-060 div {
  background: #e0e7ff;
  border-radius: 8px;
  display: grid;
  place-items: center
}

HTML

<div class="fx-060"><div style="height:80px">1</div><div style="height:140px">2</div><div style="height:60px">3</div><div style="height:120px">4</div><div style="height:90px">5</div></div>

Fallback: El grid normal de encima es el respaldo (las filas se alinean, aparecen huecos bajo los elementos cortos).

Fuente: webkit.org/blog/17862/webkit-features-for-safari-26-4/

Prompt

Para layouts al estilo Pinterest usa `display: grid-lanes` con `grid-template-columns: repeat(auto-fill, minmax(...))` dentro de `@supports (display: grid-lanes)`, con un grid normal como respaldo. Solo Safari 26.4+ en 2026-09; no añadas una librería de masonry en JS.