CSS Grid Lanes: Masonry nativo en Safari

El layout masonry, esa cuadrícula escalonada al estilo Pinterest donde los elementos de cualquier tamaño fluyen hacia el espacio disponible, ha estado en producción durante más de una década apoyado en bibliotecas de JavaScript, floats y trucos de Flexbox que casi funcionan hasta que dejan de hacerlo.¹ En la WWDC 2026, el equipo de Safari de Apple le dio a la web un modo de layout nativo para esto: CSS Grid Lanes. El patrón masonry es viejo. Lo nuevo es un tipo de display de CSS de primera clase que lo produce en tres líneas, más un control de flow-tolerance que resuelve el crónico problema de orden de tabulación y accesibilidad de masonry. Grid Lanes está disponible hoy en Safari 26.4 y detrás de un flag en otros navegadores.¹

TL;DR

• Grid Lanes es un nuevo modo de layout de CSS que se ubica entre Grid y Flexbox: estructura un eje y deja el otro libre, distribuyendo el contenido a través de múltiples lanes en un layout compacto y escalonado que preserva las proporciones naturales de cada elemento.¹
• Todo el asunto son tres líneas: display: grid-lanes, grid-template-columns con tracks fr, y gap. Cambia grid-template-columns por grid-template-rows para convertir una cascada en un muro de ladrillos. Eliges una dirección, no ambas.¹
• El dimensionamiento de tracks se hereda de Grid: ratios fr desiguales, auto-fill con minmax() para un número de columnas responsivo, y patrones repetidos de columnas angostas y anchas.¹
• Los elementos usan propiedades de Grid que ya conoces: grid-column: span 2 para ensancharlos, ubicación explícita de columnas y grid-template-columns: subgrid para integrar el contenido de una tarjeta en el layout del padre. Controlas la ubicación de columna, no la de fila; Grid Lanes decide la fila.¹
• flow-tolerance es el diferenciador clave. La ubicación basada puramente en la columna más corta puede hacer que el orden de tabulación zigzaguee respecto al orden visual, perjudicando la accesibilidad. flow-tolerance (valor por defecto 1em) relaja la regla de la columna más corta para que la ubicación siga más de cerca el orden de lectura.¹
• La disponibilidad es honesta: Safari 26.4 ya lo incluye hoy, otros navegadores lo restringen detrás de un flag. Grid Lanes todavía no es GA entre navegadores.¹

Dónde se ubica Grid Lanes entre Grid y Flexbox

Brandon, del equipo de Safari, construye un layout de Grid Lanes desde cero, a partir del minuto 3:39.

Todo modo de layout responde las mismas dos preguntas: dónde van los elementos y cuánto espacio reciben.¹ Flexbox y Grid las responden de forma distinta, y Grid Lanes se ubica en medio.

Flexbox te da un eje y una sola lane de elementos que fluyen a lo largo de él; cuando los elementos se ajustan, siguen fluyendo en la dirección elegida, en fila o en columna.¹ Grid te da dos ejes, columnas y filas, y ubica los elementos en celdas en la intersección de esos tracks. El problema aparece cuando los elementos tienen distintas relaciones de aspecto: obtienes grandes áreas vacías donde los elementos más cortos no logran llenar sus celdas.¹ Para las imágenes, eso deja tres opciones pobres. Si estiras cada imagen para llenar su celda, la distorsionas; si haces zoom para llenar el espacio, la imagen se desborda de su contenedor; y si la recortas, corres el riesgo de perder información importante.¹

Grid Lanes resuelve la tensión. Como lo plantea la sesión: “Se ubica entre Grid y Flex. En lugar de estructurar en dos dimensiones como Grid, estructura solo una y deja la otra libre. Pero a diferencia de Flex, donde el contenido fluye en una sola lane y se ajusta hacia abajo en la página, Grid Lanes distribuye el contenido a través de múltiples lanes.”¹ Los elementos se ubican uno por uno, y cada uno cae en la columna que lo deja más cerca de la parte superior, razón por la cual los elementos anteriores quedan más arriba y los posteriores se rellenan debajo.¹ El layout funciona con cualquier contenido, no solo imágenes: los bloques de texto se ajustan a su columna y el navegador dimensiona las alturas, y un titular puede extenderse a lo largo de las columnas para destacarse.¹

Masonry nativo en tres líneas de CSS

La construcción comienza con un nuevo tipo de display y luego define los tracks igual que lo hace Grid:

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

grid-template-columns establece el número de tracks y el ancho de cada uno. La unidad fr (“unidad fraccional”) le indica al navegador que tome el espacio disponible en el contenedor y lo divida en fracciones, así que 1fr 1fr 1fr produce tres columnas de igual tamaño, y gap agrega espaciado exactamente como lo hace en Grid.¹ Para convertir la cascada en un muro de ladrillos, cambia las columnas por filas: reemplaza grid-template-columns por grid-template-rows y los elementos fluyen a lo ancho en filas en vez de hacia abajo en columnas. La única salvedad, en palabras de la sesión: “eliges una dirección, no ambas.”¹

Esas tres líneas ofrecen más control del que aparentan. Las columnas no tienen por qué ser iguales: una columna central puede ocupar el doble de espacio que sus vecinas. En lugar de fijar tú mismo el número de columnas, puedes dejar que el navegador lo decida, igual que ya lo hacen los layouts de Grid responsivos:

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

auto-fill crea tantas columnas como quepan, y minmax() dice que cada una debe tener al menos 200 píxeles pero puede crecer para llenar el espacio.¹ Puedes llevar la misma idea más lejos con un patrón repetido de columnas angostas y anchas. La recompensa que destaca Brandon: “lo que más me encanta es cuánto puedes hacer con apenas unas pocas líneas de CSS.”¹

Dar forma a elementos individuales con propiedades de Grid que ya conoces

Grid Lanes da forma a los elementos con propiedades que ya existen en Grid. Parte de un contenedor grid-lanes con tres columnas iguales. Para darle más espacio a un elemento, grid-column: span 2 lo extiende a lo largo de dos columnas y el resto del layout se ajusta a su alrededor.¹ También puedes ubicar un elemento con exactitud: configúralo para que comience en la columna 2 y abarque las columnas 2 y 3. La restricción es deliberada: “puedes controlar la ubicación de columna, pero no la de fila. Grid Lanes decide la fila por ti.”¹

subgrid integra el contenido de un componente anidado en el padre. Una tarjeta de receta que abarca dos columnas contiene una imagen y algo de texto que, por defecto, no participan en el layout de Grid Lanes. Agrega display: grid-lanes y grid-template-columns: subgrid a la tarjeta, y “su contenido se une al layout del padre como elementos propios”: la imagen ocupa una columna, el texto ocupa la otra, cada uno dimensionado según su contenido.¹ El anidamiento funciona en cualquier dirección, un grid normal dentro de un contenedor de Grid Lanes o al revés, porque las mismas herramientas y la misma sintaxis se trasladan.¹

El control flow-tolerance: la solución de accesibilidad

Aquí está la parte que hace de Grid Lanes algo más que un masonry más prolijo. La ubicación basada puramente en la columna más corta luce muy bien la mayor parte del tiempo, pero a veces no se siente del todo correcta, y la razón es la accesibilidad.¹

Imagina dos elementos en una fila con casi la misma altura, donde el elemento 2 es unos pocos píxeles más corto que el elemento 1. El área debajo del elemento 2 queda más cerca de la parte superior, así que el navegador ubica allí el siguiente elemento, y el elemento 4 rellena la primera columna. El resultado visual se lee de izquierda a derecha en la primera fila y de derecha a izquierda en la última. Como lo plantea la sesión: “La diferencia entre el orden de tabulación y la forma en que el contenido aparece visualmente afectará la accesibilidad de las personas y puede generar una experiencia confusa.”¹ El orden de tabulación sigue el orden del código fuente; la ubicación visual en zigzag rompe la correspondencia de la que dependen los usuarios de teclado y lectores de pantalla.

flow-tolerance es el control que relaja o ajusta la regla de la columna más corta.¹ Con él activado, el navegador pregunta por cada nuevo elemento: “¿es la columna más alta menor que la columna más corta más flow-tolerance?”¹ Si la diferencia está dentro de la tolerancia, el elemento rellena la columna que mantiene la ubicación alineada con el orden de lectura; una vez que la diferencia crece demasiado para ignorarla, el elemento cae en la columna genuinamente más corta. El valor por defecto es 1em:

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr;
  flow-tolerance: 1em;
}

La recomendación de Apple es “probar distintos valores de flow-tolerance para encontrar el que funcione con tu contenido.”¹ La contrapartida de darle flexibilidad al navegador es que el resultado puede sorprenderte de vez en cuando, y cuando eso ocurre, Web Inspector tiene soporte completo para Grid Lanes: activa el overlay y obtienes líneas para columnas y filas, números de orden proyectados sobre cada elemento para que veas exactamente cómo ocurrió la ubicación, y los gaps dibujados entre los elementos.¹

Puntos clave

Para desarrolladores frontend: - Reemplaza las bibliotecas de masonry en JavaScript y los trucos de Flexbox con display: grid-lanes, tres tracks fr y gap; reutiliza las herramientas de dimensionamiento de tracks de Grid (auto-fill, minmax(), fr desiguales) que ya conoces.¹ - Recurre a grid-column: span N y a la ubicación explícita de columnas para destacar elementos, y a grid-template-columns: subgrid para integrar el contenido de tarjetas anidadas en el layout del padre.¹

Para equipos enfocados en la accesibilidad: - Ajusta flow-tolerance (valor por defecto 1em) para que la ubicación visual siga el orden del código fuente y de tabulación, cerrando la brecha que la ubicación masonry en zigzag abre para los usuarios de teclado y lectores de pantalla.¹ - Verifica la ubicación con el overlay de Grid Lanes de Web Inspector, que proyecta los números de orden de los elementos directamente sobre el layout.¹

Para líderes técnicos que planifican el despliegue: - Trata Grid Lanes como disponible en Safari 26.4, restringido por flag en el resto, no como GA entre navegadores; despliégalo como una mejora progresiva con un fallback elegante para los navegadores que aún están detrás del flag.¹

FAQ

¿Qué es CSS Grid Lanes?

CSS Grid Lanes es un nuevo modo de layout que el equipo de Safari presentó en la WWDC 2026 para construir layouts estilo masonry de forma nativa. Se ubica entre Grid y Flexbox: estructura un eje y deja el otro libre, distribuyendo los elementos a través de múltiples lanes en un layout compacto y escalonado que preserva las proporciones naturales de cada elemento.¹

¿Cómo construyo un layout masonry con Grid Lanes?

Tres líneas de CSS: configura display: grid-lanes, define los tracks con grid-template-columns usando unidades fr (por ejemplo 1fr 1fr 1fr para tres columnas iguales), y agrega un gap. Cambia grid-template-columns por grid-template-rows para convertir una cascada vertical en un muro de ladrillos horizontal. Eliges una dirección, no ambas.¹

¿Qué hace flow-tolerance?

flow-tolerance relaja o ajusta la regla que ubica cada elemento en la columna más corta. La ubicación basada puramente en la columna más corta puede hacer que el orden visual zigzaguee alejándose del orden de tabulación, lo que perjudica la accesibilidad. Con flow-tolerance activado, el navegador comprueba si la columna más alta es menor que la columna más corta más la tolerancia antes de decidir la ubicación, manteniendo los elementos alineados con el orden de lectura hasta que la diferencia de altura crece demasiado. El valor por defecto es 1em.¹

¿Puedo usar Grid Lanes en producción hoy?

En Safari 26.4 ya está disponible. Otros navegadores lo restringen detrás de un flag, así que Grid Lanes todavía no es GA entre navegadores. Despliégalo como una mejora progresiva con un fallback para los navegadores que aún requieren el flag.¹

¿Grid Lanes funciona con las propiedades de Grid que ya conozco?

Sí. La ubicación a nivel de elemento usa propiedades de Grid existentes: grid-column: span 2 ensancha un elemento, la ubicación explícita de columnas lo posiciona, y grid-template-columns: subgrid integra el contenido de un componente anidado en el layout del padre. Tú controlas la ubicación de columna; Grid Lanes decide la fila.¹

Para una referencia práctica una vez que empieces a construir, WebKit mantiene una guía de campo oficial de Grid Lanes en gridlanes.webkit.org. El panel señaló que Grid Lanes se combina con el nuevo customizable select: un layout masonry funciona dentro de un menú desplegable ::picker(select).²

Grid Lanes es el tipo de incorporación a la plataforma que elimina una dependencia en vez de agregar una, que es precisamente el argumento de el no-build manifesto y un camino directo hacia el tipo de resultado documentado en el writeup del puntaje perfecto en Lighthouse. Enviar un layout nativo y semántico en lugar de cuadrículas renderizadas con JavaScript también mantiene tu markup legible para las máquinas, el argumento que se plantea en HTML is the format agents want. El hub completo de la serie es la Apple Ecosystem Series.

Referencias