CSS Grid Lanes: guía y playground masonry

Guía educativa de CSS Grid Lanes

Empaquetar contenido sin forzar filas iguales

Una galería de imágenes o tarjetas puede tener alturas distintas y seguir compartiendo columnas. Grid Lanes ofrece ese reparto tipo masonry con CSS: aprende cómo se distribuyen las piezas, cuándo conviene usarlo y cómo conservar un resultado útil sin soporte.

Volver al playground

Modelo mental

Define tracks en un eje y deja que las piezas se apilen en el otro. No hay una cuadrícula de filas y columnas que cada tarjeta deba rellenar.

Dos columnas, sin filas compartidasEsquema estático conceptual, independiente del soporte del navegador. Los números representan el orden de origen; la prueba nativa está en la receta.

Las dos lanes fijan el ancho disponible para cada pieza.
Las piezas 1 y 2 tienen alturas distintas; 3 puede empezar antes de que termine 2.
La secuencia 1–6 alterna entre lanes; no se lee toda una columna antes de pasar a la otra.

El eje de Grid contiene las lanes: sus tamaños se definen con la sintaxis conocida de Grid, como repeat(), minmax() y fr. El eje de apilamiento permite que cada pieza conserve el tamaño que necesita su contenido.

La colocación automática procesa las piezas en orden y busca una posición cercana al inicio entre las lanes disponibles, teniendo en cuenta su ocupación y la tolerancia. Una tarjeta breve deja espacio para la siguiente sin esperar a la más alta de una fila común.

display: grid-lanes crea un contenedor de nivel de bloque; inline-grid-lanes crea uno de nivel inline. Esa diferencia afecta a la caja exterior, no convierte el algoritmo en una fila de Flexbox.

Distribución, orientación y spans

Elige qué eje necesita tracks. En un modo de escritura horizontal, columnas producen un waterfall vertical y filas un brick horizontal.

grid-template-columns define las lanes del waterfall. Para brick, usa grid-template-rows y deja grid-template-columns en none; conservar una plantilla de columnas del layout anterior puede mantener la orientación que no esperabas.

En la receta, repeat(auto-fit, minmax(min(12rem, 100%), 1fr)) crea tracks responsivos. El mínimo interior min() permite una sola lane estrecha sin desbordar el contenedor. La cantidad de lanes depende del espacio disponible y del gap.

grid-column coloca o extiende una pieza en waterfall; grid-row cumple ese papel en brick. span 2 ocupa dos lanes, pero no fija una altura. Las líneas negativas cuentan desde el final del grid explícito. No coloques piezas en supuestas filas del eje de apilamiento.

Colocación en el eje que tiene tracks

Fragmentos para dos contenedores alternativos con una pieza .featured. En waterfall se garantizan dos columnas para el span; en brick se garantizan dos filas. Añade el estilo de las tarjetas y comprueba el scroll del brick en su contexto.

Colocación en el eje que tiene tracks

CSS

@supports (display: grid-lanes) {
  .waterfall {
    display: grid-lanes;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;

    > .featured {
      grid-column: span 2;
    }
  }

  .brick {
    display: grid-lanes;
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    gap: 1rem;
    overflow: auto;

    > .featured {
      grid-row: span 2;
    }
  }
}

Comparativas

Estos dibujos son esquemas conceptuales. Elige el layout por las relaciones que debe conservar el contenido, además de por su densidad visual.

display: grid-lanes;display: grid;

Grid: alineación en dos ejes

Grid mantiene filas y columnas compartidas: sirve para formularios, paneles o tarjetas que necesitan alinearse. Grid Lanes conserva tracks en un solo eje. grid-auto-flow: dense rellena huecos entre celdas de Grid, pero no crea masonry de alturas intrínsecas.

Explorar CSS Grid

display: grid-lanes;columns: 2;

Columns: un flujo que se fragmenta

Columns hace fluir contenido por una columna y después por la siguiente. break-inside: avoid ayuda a mantener una tarjeta junta, pero no elige la lane más corta. Puede ser un fallback útil si aceptas ese recorrido; no reproduce la distribución de Grid Lanes.

Explorar CSS Columns

Una galería con mejora progresiva

Las dos listas usan el mismo contenido, con longitudes distintas, y mantienen enlaces reales. La primera es la base estable; la segunda activa Grid Lanes solo cuando el navegador reconoce su sintaxis.

La base usa Grid con alineación al inicio, sin igualar la altura de las tarjetas. @supports cambia el display de la segunda lista y reutiliza sus tracks y gap. El contenido sigue accesible sin JavaScript y no necesita medir alturas ni calcular spans de filas.

Referencia: Grid convencional

01
Alinear con Grid

Cuando las filas compartidas importan.
Abrir lab
02
Leer con Columns

Un texto largo puede fluir entre columnas sin convertirse en una galería de piezas independientes. El orden se recorre por columnas.
Abrir lab
03
Distribuir con Flexbox

Una fila o columna cuyo contenido guía el reparto del espacio.
Abrir lab
04
Desplazar con snap

Si el contenido debe avanzar dentro de una zona de scroll, define primero ese contenedor y sus destinos. El ajuste de scroll es una decisión distinta al empaquetado de tarjetas.
Abrir lab
05
Delimitar con border

Un borde que acompaña al tamaño del contenido.
Abrir lab
06
Aplicar un filtro

Los efectos visuales cambian el resultado dibujado. Antes de combinarlos con el layout, comprueba qué elemento recibe el filtro y qué contenido debe permanecer legible.
Abrir lab

Resultado real de Grid: cada nueva fila empieza después de la tarjeta más alta de la fila anterior. Esta lista conserva siempre el layout de respaldo.

Referencia: Grid convencional

HTML

<ul id="lanes-guide-grid" aria-label="Galería de referencia con CSS Grid" role="list">
  <li>
    <article>
      <span>01</span>
      <h4>Alinear con Grid</h4>
      <p>Cuando las filas compartidas importan.</p>
      <a href="/css/layouts/grid/">Abrir lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>02</span>
      <h4>Leer con Columns</h4>
      <p>Un texto largo puede fluir entre columnas sin convertirse en una galería de piezas independientes. El orden se recorre por columnas.</p>
      <a href="/css/layouts/columns/">Abrir lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>03</span>
      <h4>Distribuir con Flexbox</h4>
      <p>Una fila o columna cuyo contenido guía el reparto del espacio.</p>
      <a href="/css/layouts/flexbox/">Abrir lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>04</span>
      <h4>Desplazar con snap</h4>
      <p>Si el contenido debe avanzar dentro de una zona de scroll, define primero ese contenedor y sus destinos. El ajuste de scroll es una decisión distinta al empaquetado de tarjetas.</p>
      <a href="/css/scroll/scroll-snap/">Abrir lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>05</span>
      <h4>Delimitar con border</h4>
      <p>Un borde que acompaña al tamaño del contenido.</p>
      <a href="/css/borders/border/">Abrir lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>06</span>
      <h4>Aplicar un filtro</h4>
      <p>Los efectos visuales cambian el resultado dibujado. Antes de combinarlos con el layout, comprueba qué elemento recibe el filtro y qué contenido debe permanecer legible.</p>
      <a href="/css/filters/filter/">Abrir lab</a>
    </article>
  </li>
</ul>

CSS

:root {
  color-scheme: light dark;
}

#lanes-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  align-items: start;
  gap: 16px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  font-size: 1rem;

  > li {
    min-inline-size: 0;
    padding: 1rem;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    border-radius: 16px;
    corner-shape: squircle;
    background: light-dark(color-mix(in oklch, oklch(0.95 0.008 95) 98%, white), color-mix(in oklch, oklch(0.22 0.024 260) 86%, black));
    overflow-wrap: anywhere;
  }

  article {
    display: grid;
    gap: 0.5rem;

    > * {
      margin: 0;
    }
  }

  h4 {
    font-size: 1.25rem;
  }

  span {
    font-weight: 800;
  }

  a {
    color: light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
    text-decoration: underline;
    text-underline-offset: 0.2em;

    &:focus-visible {
      outline: 3px dashed light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
      outline-offset: 3px;
    }
  }
}

Receta: Grid Lanes con respaldo Grid

Esta receta está usando Grid Lanes nativo.Esta receta está usando el respaldo con CSS Grid; no demuestra masonry nativo.

01
Alinear con Grid

Cuando las filas compartidas importan.
Abrir lab
02
Leer con Columns

Un texto largo puede fluir entre columnas sin convertirse en una galería de piezas independientes. El orden se recorre por columnas.
Abrir lab
03
Distribuir con Flexbox

Una fila o columna cuyo contenido guía el reparto del espacio.
Abrir lab
04
Desplazar con snap

Si el contenido debe avanzar dentro de una zona de scroll, define primero ese contenedor y sus destinos. El ajuste de scroll es una decisión distinta al empaquetado de tarjetas.
Abrir lab
05
Delimitar con border

Un borde que acompaña al tamaño del contenido.
Abrir lab
06
Aplicar un filtro

Los efectos visuales cambian el resultado dibujado. Antes de combinarlos con el layout, comprueba qué elemento recibe el filtro y qué contenido debe permanecer legible.
Abrir lab

Resultado real según soporte: Grid Lanes empaqueta las piezas en columnas; sin soporte se conserva Grid. Si ambas listas se ven iguales, revisa el aviso de modo y el soporte del navegador.

Receta: Grid Lanes con respaldo Grid

HTML

<ul id="lanes-guide-enhanced" aria-label="Galería progresiva de Grid Lanes con respaldo Grid" role="list">
  <li>
    <article>
      <span>01</span>
      <h4>Alinear con Grid</h4>
      <p>Cuando las filas compartidas importan.</p>
      <a href="/css/layouts/grid/">Abrir lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>02</span>
      <h4>Leer con Columns</h4>
      <p>Un texto largo puede fluir entre columnas sin convertirse en una galería de piezas independientes. El orden se recorre por columnas.</p>
      <a href="/css/layouts/columns/">Abrir lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>03</span>
      <h4>Distribuir con Flexbox</h4>
      <p>Una fila o columna cuyo contenido guía el reparto del espacio.</p>
      <a href="/css/layouts/flexbox/">Abrir lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>04</span>
      <h4>Desplazar con snap</h4>
      <p>Si el contenido debe avanzar dentro de una zona de scroll, define primero ese contenedor y sus destinos. El ajuste de scroll es una decisión distinta al empaquetado de tarjetas.</p>
      <a href="/css/scroll/scroll-snap/">Abrir lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>05</span>
      <h4>Delimitar con border</h4>
      <p>Un borde que acompaña al tamaño del contenido.</p>
      <a href="/css/borders/border/">Abrir lab</a>
    </article>
  </li>
  <li>
    <article>
      <span>06</span>
      <h4>Aplicar un filtro</h4>
      <p>Los efectos visuales cambian el resultado dibujado. Antes de combinarlos con el layout, comprueba qué elemento recibe el filtro y qué contenido debe permanecer legible.</p>
      <a href="/css/filters/filter/">Abrir lab</a>
    </article>
  </li>
</ul>

CSS

:root {
  color-scheme: light dark;
}

#lanes-guide-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  align-items: start;
  gap: 16px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  font-size: 1rem;

  > li {
    min-inline-size: 0;
    padding: 1rem;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    border-radius: 16px;
    corner-shape: squircle;
    background: light-dark(color-mix(in oklch, oklch(0.95 0.008 95) 98%, white), color-mix(in oklch, oklch(0.22 0.024 260) 86%, black));
    overflow-wrap: anywhere;
  }

  article {
    display: grid;
    gap: 0.5rem;

    > * {
      margin: 0;
    }
  }

  h4 {
    font-size: 1.25rem;
  }

  span {
    font-weight: 800;
  }

  a {
    color: light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
    text-decoration: underline;
    text-underline-offset: 0.2em;

    &:focus-visible {
      outline: 3px dashed light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
      outline-offset: 3px;
    }
  }

  @supports (display: grid-lanes) {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 16px;
  }
}

El playground también permite observar su fallback con Columns en waterfall y Grid en brick. Esta receta elige Grid como base para conservar una lectura por filas predecible. El fallback es una decisión de producto y puede tener otro aspecto sin perder contenido.

Orden de lectura y tolerancia

Una composición compacta no garantiza un recorrido fácil de seguir. Comprueba el foco con los enlaces de la receta y con las tarjetas reales del producto.

Estas listas no usan order, tabindex positivo ni reordenación del DOM: Tab sigue la secuencia de origen. La posición visual puede saltar entre lanes. Evita masonry para pasos, rankings o contenido cuya secuencia sea imprescindible si ese recorrido resulta confuso.

flow-tolerance define cuánta diferencia entre posiciones puede tratarse como un empate. normal equivale a 1em; 0px exige distinguir incluso diferencias pequeñas. Un valor mayor puede reducir cambios de lane por diferencias insignificantes, a costa de un empaquetado menos ajustado.

infinite ignora esas diferencias al repartir en orden por las lanes, pero puede producir saltos grandes en el eje de apilamiento cuando las alturas difieren mucho. No es una solución automática de accesibilidad. Prueba primero longitudes finitas y comprueba el resultado.

Los spans mixtos y la colocación explícita pueden hacer que una pieza posterior aparezca visualmente antes que otra. La tolerancia no elimina todos esos retrocesos. Revisa tamaños extremos, imágenes cargadas, textos traducidos, móvil y navegación con teclado antes de elegir la composición.

Errores frecuentes

Diagnostica el eje, el soporte y el recorrido antes de retocar la altura de cada tarjeta.

Una demo antigua no se activa

Resultado esperado: Ver el layout con la sintaxis enseñada en esta guía.
Causa: El ejemplo usa propuestas anteriores, como grid-template-rows: masonry, o el navegador no reconoce display: grid-lanes.
Solución: Contrasta la sintaxis actual, consulta el soporte de esta versión y conserva un fallback. Una bandera experimental con otra sintaxis no prueba compatibilidad con esta receta.

Quedan huecos debajo de las tarjetas breves

Resultado esperado: Empaquetar las tarjetas sin filas comunes.
Causa: El resultado activo es Grid convencional, o el tamaño de cada pieza se ha forzado artificialmente. dense por sí solo no añade masonry.
Solución: Comprueba el modo mostrado, deja que las piezas conserven su tamaño y activa Grid Lanes dentro de @supports cuando exista soporte.

Brick sigue creciendo hacia abajo

Resultado esperado: Definir filas y apilar en horizontal.
Causa: Queda una plantilla de columnas activa al cambiar de orientación.
Solución: Deja grid-template-columns: none y define grid-template-rows. Comprueba el modo de escritura y ofrece scroll contenido si el brick necesita más ancho.

Un span fuerza una columna extra en móvil

Resultado esperado: Conservar el contenido dentro del ancho disponible.
Causa: Una pieza exige dos lanes o una línea lejana cuando el layout responsivo solo tiene una.
Solución: Vuelve a colocación automática en tamaños estrechos o aplica el span solo cuando haya lanes suficientes. El mínimo flexible no corrige por sí solo la colocación explícita.

El foco parece retroceder

Resultado esperado: Seguir un recorrido comprensible entre piezas.
Causa: Tamaños muy diferentes, tolerancia demasiado pequeña o spans mezclados separan el orden visual del de origen.
Solución: Conserva un DOM significativo, ajusta una tolerancia finita y simplifica spans/colocación. Si el orden importa más que la densidad, elige Grid convencional.

Soporte y compatibilidad

El soporte del algoritmo, sus valores y la evolución del borrador deben revisarse por separado de las propiedades conocidas de Grid.

Grid Lanes tiene disponibilidad limitada. Las fuentes consultadas indican soporte desde Safari 26.4, incluido iOS, y ausencia de soporte estable en Chrome, Edge y Firefox. La tarjeta Baseline no convierte el soporte de un motor en interoperabilidad.

CSS Grid Layout Level 3 sigue siendo un borrador en desarrollo. Esta guía usa display: grid-lanes y flow-tolerance; ejemplos antiguos con otras propuestas no son intercambiables. Comprueba cada subfeature y el navegador de destino antes de publicar.

@supports (display: grid-lanes) comprueba que se acepta esa declaración. No verifica todos los valores, el algoritmo completo ni la accesibilidad del resultado. Si dependes de un valor concreto de flow-tolerance, compruébalo por separado y prueba su comportamiento.

Ritmo visual

Sin JavaScript

Tracks flexibles

El DOM permanece intacto

Tolerancia

Sin media queries

Waterfall o brick

Alturas distintas

Spans y colocación

Navegación predecible

Mejora progresiva

Cambia cada control

Grid: alineación en dos ejes

Columns: un flujo que se fragmenta

Alinear con Grid

Leer con Columns

Distribuir con Flexbox

Desplazar con snap

Delimitar con border

Aplicar un filtro