CSS Grid Lanes

 (webkit.org)
6 puntos por GN⁺ 2025-12-20 | 2 comentarios | Compartir por WhatsApp
  • Una nueva función de CSS, Grid Lanes, fue incorporada en Safari Technology Preview 234 para implementar layouts tipo masonry en la web
  • Con la propiedad display: grid-lanes, se pueden crear grids responsivos sin media queries, y grid-template-columns permite definir columnas flexibles
  • La propiedad item-tolerance permite ajustar la sensibilidad en la colocación de elementos, reduciendo el desequilibrio visual causado por diferencias de tamaño en el contenido
  • Admite tanto dirección por columnas como por filas, y el flujo se decide automáticamente según se defina grid-template-columns o grid-template-rows
  • El CSS Working Group sigue debatiendo algunos nombres de propiedades, y el equipo de WebKit recomienda experimentar mientras avanzan en paralelo la estandarización y la implementación

Resumen de CSS Grid Lanes

  • Grid Lanes es un nuevo modo de visualización para implementar layouts estilo masonry en la web con CSS nativo
    • Se configura con display: grid-lanes usando una sintaxis similar a la de grid
    • grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) permite crear columnas flexibles con un ancho mínimo de 250px
  • La propiedad gap define el espaciado entre elementos, y permite adaptarse a cualquier tamaño de pantalla sin media queries
  • Se puede probar experimentalmente en Safari Technology Preview 234, y WebKit ofrece una página de demos

Cómo funciona Grid Lanes

  • El navegador coloca automáticamente cada elemento en la columna más cercana a la parte superior
    • De forma similar a Masonry.js, el siguiente elemento se agrega a la columna que en ese momento sea la más corta
    • Al navegar con Tab, el usuario puede recorrer horizontalmente el contenido visible en ese momento
  • En contenidos con carga infinita por scroll, también es posible ordenar automáticamente sin usar JavaScript

Funciones extendidas de CSS Grid

  • Variación en el tamaño de las lanes: con la sintaxis grid-template-* se pueden alternar columnas angostas y anchas
    • Ejemplo: grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)
  • Soporte para expansión de elementos (span)
    • Se puede hacer que un elemento abarque varias columnas (grid-column: span 4, etc.)
    • Demo de ejemplo: layout tipo artículo de periódico
  • También permite posicionamiento explícito
    • Ejemplo: header { grid-column: -3 / -1; } para fijar el encabezado en las últimas columnas

Cambio de dirección

  • Admite tanto layouts basados en columnas (waterfall) como basados en filas (brick)
    • Si se define grid-template-columns, se configura automáticamente en dirección por columnas; si se define grid-template-rows, en dirección por filas
  • grid-auto-flow: normal es el valor predeterminado, y determina automáticamente el comportamiento según la dirección definida
  • El CSS Working Group sigue discutiendo nombres de propiedades para controlar el flujo (grid-lanes-direction, etc.)
    • La conversación relacionada continúa en un issue de GitHub CSSWG-drafts

Ajuste de sensibilidad en la colocación: item-tolerance

  • item-tolerance determina qué tan estrictamente se distinguen las diferencias de tamaño al colocar elementos
    • El valor predeterminado es 1em, y diferencias menores a eso se consideran como la misma altura
    • Cuanto mayor sea el valor, menos se moverán los elementos de izquierda a derecha; cuanto menor sea, más fino será el ajuste de posición
  • Desde el punto de vista de accesibilidad, hace falta elegir un valor adecuado para minimizar los saltos visuales al navegar con Tab
  • Actualmente el nombre de la propiedad está definido como item-tolerance, pero podría cambiar a flow-tolerance o pack-tolerance

Ejemplos de uso y pruebas

  • Safari Technology Preview 234 incluye varias demos
    • Galería de fotos, artículos estilo periódico, sitio de museo, layout de mega menú, etc.
  • Código de ejemplo: 
    .container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}
  • Es útil no solo para imágenes, sino también para footers o menús con muchos enlaces

Próximos pasos

  • El CSS Working Group sigue trabajando en definir los nombres de propiedades pendientes
  • El equipo de WebKit ha estado avanzando en paralelo la implementación y la estandarización desde mediados de 2022
  • Recomiendan a los desarrolladores crear demos y participar con feedback
    • Jen Simmons está recopilando comentarios a través de Bluesky y Mastodon
  • La sintaxis básica ya está estabilizada, por lo que está lista para aplicarse en proyectos reales

Lecturas relacionadas

2 comentarios

 
shakespeares 2025-12-21

Entonces habría que usar por separado Grid-lanes para Safari y grid para Firefox. Por favor, pónganse de acuerdo con el estándar web...
 
GN⁺ 2025-12-20
Opiniones en Hacker News

  • Aplausos para el equipo de Safari. Fue realmente sorprendente ver cómo en octubre saltó de repente hasta la cima del ranking de Interop 2025

    • Después de iOS 26, de verdad se sintió que Safari recibió una gran actualización de funciones web. No solo WebGPU, también completaron las partes faltantes de la API OPFS, así que ahora ya se puede usar en serio. Además, agregaron la propiedad CSS field-sizing, resolviendo el problema de hacer que los campos de texto crezcan automáticamente según el contenido
    • Safari suele ser visto como “el mejor navegador” cada vez que hay un gran lanzamiento, pero fuera de esos momentos tiende a recibir muchas críticas. Creo que eso pasa porque otros navegadores hacen actualizaciones continuas, mientras que Safari sigue un ciclo de lanzamientos más tradicional
    • En realidad no es tan sorprendente. Llevo años viendo cómo el equipo de Safari publica de forma constante funciones modernas de HTML y CSS
    • Mientras el equipo de Chrome promociona funciones experimentales como WebPCIe, Safari ha venido entregando funciones que los usuarios realmente quieren. Por ejemplo, soportó mucho antes cosas como los efectos de fondo borroso
    • Aun así, es una lástima que Safari todavía no soporte wasm de 64 bits. En la lista de funciones de WebAssembly aparece como “100% compatible”, pero en la práctica faltan partes importantes

  • Ojalá salga pronto la función CSS Gap Decorations. Ya me cansé de seguir usando hacks innecesarios para crear divisores bonitos entre elementos de flex o grid

    • Alguien propone usar tablas. Ya han mejorado muchísimo comparadas con antes, pero seguimos queriendo más. Parece que los humanos nunca estamos satisfechos

  • Usé un layout Masonry en un proyecto reciente, y aunque el rendimiento está bien, como se basa en absolute positioning se siente bastante hacky. Hay que conocer de antemano la relación de aspecto de los objetos y volver a calcular todo al redimensionar. Por eso espero que el soporte nativo llegue pronto

    • Pienso igual. Llevo esperando desde 2019 el día en que CSS resuelva esto y pueda quitar los últimos 1.3 KB de JavaScript de mi página personal. Gracias a todos los que están haciendo esta función posible

  • Estos anuncios están geniales, pero también tienen algo de comedia trágica. Como Apple no actualiza el navegador de forma continua, falta muchísimo para que se pueda confiar de verdad en estas funciones nuevas y usarlas en producción

  • El layout Masonry se ve bien, pero me parece difícil captar todas las imágenes de un vistazo

    • Gran parte del “diseño” web está más enfocada en la apariencia que en la usabilidad. Casi nadie usa realmente el producto; solo ven una animación de scroll y dicen “qué bonito”
    • Si todas las imágenes son horizontales o todas son verticales, está bien, pero si se mezclan el layout se vuelve un desastre

  • Me intriga por qué no lo llamaron Masonry. Aun así, el nombre grid-lanes es descriptivo y fácil de entender

  • Me pregunto cuánto tardarán los LLM en aprender correctamente esta nueva sintaxis de CSS

  • Si tengo que ver una página web hecha con una cuadrícula de texto de tamaños y posiciones arbitrarias, preferiría que alguien me disparara
    Imagen de demo de una cuadrícula estilo periódico

    • ¿Nunca has leído un periódico?
    • A mí sí me gusta este tipo de diseño. Permite implementar en la web un layout asimétrico pero eficiente, como el de un periódico
    • Pero siento que eso viola principios básicos del diseño como alineación y agrupación
    • Curiosamente, a mí me parece realmente genial
    • NYTimes.com me viene a la mente justo como ejemplo de eso

  • Personalmente no me gustan los layouts por lanes. Es difícil revisar todos los elementos de una lista en orden, y la vista va saltando arriba y abajo, lo que genera fatiga cognitiva

    • Pero si no necesitas revisar todos los elementos de forma sistemática, un layout por lanes también funciona. Es adecuado para sitios donde absorbes el contenido de un vistazo, como Pinterest
    • Se ve bien, pero es un layout incómodo para un uso profundo
    • El objetivo no es la eficiencia, sino dejarte ver el conjunto de un solo vistazo. Como en un periódico o una galería de fotos
    • Es irónico que la función llegue justo cuando la moda ya va de salida. En UX no es gran cosa, pero visualmente se ve bonita
    • Tiene vibra de diseño de hemisferio derecho. Va bien con sitios como Pinterest o Home Assistant

  • Creo que Apple debería permitir descargar Safari de forma estable en todas las plataformas

    • Recuerdo haber instalado Safari en Windows XP. Parece que todavía no ha pasado suficiente tiempo desde ese fracaso
    • Pero quizá sea posible indirectamente. El nuevo navegador de Kagi usa WebKit y, aunque por ahora es solo para macOS, se espera que eventualmente también salga una versión para Windows