CSS Grid Lanes: El nuevo diseño Masonry nativo

Has construido diseños estilo Pinterest antes. Has usado librerías JavaScript, trucos con multi-columnas CSS, o soluciones complejas con Grid usando row spans calculados. Cada enfoque funciona, pero ninguno se siente nativo.

CSS Grid Level 3 está explorando comportamiento masonry nativo dentro de Grid. Una propuesta actual introduce display: grid-lanes como una posible sintaxis para esta funcionalidad—pero antes de refactorizar tu código en producción, necesitas entender dónde están realmente las cosas a principios de 2026.

Este artículo cubre el concepto central detrás de CSS Grid Lanes, cómo difiere del Grid tradicional, las realidades actuales del soporte en navegadores, y qué deberías considerar antes de adoptarlo.

Qué hace realmente CSS Grid Lanes

El CSS Grid tradicional opera en dos ejes simultáneamente. Defines tanto filas como columnas, y los elementos ocupan celdas explícitas. Esto crea diseños rectangulares predecibles—pero también deja espacios vacíos cuando los elementos tienen alturas variables.

El borrador de CSS Grid Level 3 introduce comportamiento estilo masonry, a veces referido como “grid lanes”, donde defines tracks en un eje (típicamente columnas) y los elementos se empaquetan de forma compacta en el otro eje usando un algoritmo estilo masonry. Los elementos fluyen hacia el carril que tenga más espacio disponible, llenando los espacios automáticamente.

La sintaxis del borrador actual bajo discusión se ve así:

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Sin embargo, la sintaxis y el comportamiento aún están evolucionando. Experimentos anteriores usaban valores como masonry dentro de grid-template-rows o grid-template-columns, y algunos motores implementaron versiones prototipo de esos enfoques. El CSS Working Group continúa refinando cómo masonry se integra en Grid Level 3. Consulta el último borrador del CSS Grid Layout Module Level 3.

Cómo Grid Lanes difiere del Grid estándar

Con display: grid, los elementos respetan tanto los tracks de fila como de columna. Los elementos más cortos dejan espacio vacío debajo de ellos hasta que comienza la siguiente fila.

Con el comportamiento Grid estilo masonry, solo un eje tiene tracks definidos. Los elementos en el otro eje se apilan según el espacio disponible, no según límites estrictos de fila. Esto crea la apariencia escalonada característica de los diseños masonry.

La mayoría de las características familiares de Grid—como definir tracks de columna y colocación explícita—permanecen conceptualmente disponibles, pero las implementaciones pueden variar mientras la funcionalidad es experimental. Comportamientos como el spanning y casos límite de colocación aún no son completamente interoperables entre motores.

Diseños en cascada vs. en ladrillo

Define columnas con grid-template-columns, y los elementos fluyen verticalmente—el clásico diseño en cascada. Define filas con grid-template-rows (en implementaciones experimentales), y los elementos fluyen horizontalmente en un patrón estilo ladrillo.

Detalles como el comportamiento de flujo y controles de ordenamiento aún están bajo discusión en la especificación y pueden diferir entre vistas previas de navegadores. Evita depender de propiedades no estándar o solo en borrador a menos que verifiques el soporte en tu navegador objetivo.

Soporte en navegadores: La imagen realista

Aquí es donde la planificación de producción se complica.

A principios de 2026, el comportamiento masonry nativo en CSS Grid permanece experimental en todos los navegadores principales:

• Safari Technology Preview tiene una de las implementaciones prototipo más completas.
• Navegadores basados en Chromium han experimentado con sintaxis relacionada con masonry detrás de flags, incluyendo valores de track masonry anteriores.
• Firefox ha implementado experimentos masonry detrás de flags de configuración.

Ningún canal estable de navegador principal ofrece soporte completamente interoperable y sin flags al momento de escribir esto. Puedes rastrear el estado de compatibilidad a través de Can I use y las notas de lanzamiento de navegadores.

El CSS Working Group continúa refinando los detalles de integración dentro de Grid Level 3.

La conclusión práctica: No implementes sintaxis Grid estilo masonry en producción sin fallbacks.

Estrategia de mejora progresiva

La detección de características te permite experimentar donde sea compatible mientras recurres elegantemente a una alternativa:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

@supports (display: grid-lanes) {
  .container {
    display: grid-lanes;
  }
}

Los navegadores sin soporte renderizan un diseño Grid estándar. Los elementos se alinean a filas en lugar de empaquetarse de forma compacta—una línea base aceptable para muchos casos de uso.

Dado que la sintaxis puede cambiar antes de la estabilización, trata esto como mejora progresiva en lugar de una dependencia de producción a largo plazo.

Preocupaciones de accesibilidad y orden del código fuente

Los diseños masonry introducen un problema de orden DOM-versus-visual. Los elementos aparecen en posiciones determinadas por el algoritmo de empaquetamiento, no por su orden en el código fuente. Un usuario navegando con tabulador a través del contenido puede saltar de forma impredecible por el diseño.

Esto no es exclusivo de Grid Lanes—es inherente a los diseños estilo masonry. Debes probar exhaustivamente la navegación por teclado, especialmente para contenido donde la secuencia de lectura importa.

Los lectores de pantalla siguen el orden del DOM independientemente de la colocación visual. Asegúrate de que tu estructura HTML tenga sentido cuando se lee linealmente.

Conclusión

Para experimentos, prototipos y capas de mejora progresiva, el comportamiento Grid estilo masonry vale la pena explorarlo ahora. La dirección se está volviendo más clara dentro de Grid Level 3, y la experiencia práctica hoy rinde frutos cuando el soporte en navegadores madure.

Para funcionalidades de producción que requieren comportamiento consistente entre navegadores, espera. Monitorea las discusiones de especificación y las notas de implementación de navegadores antes de comprometerte.

El masonry nativo en CSS ha sido una solicitud de larga data. Finalmente está tomando forma—pero aún no está completamente estandarizado ni es interoperable. Verifica que el soporte en navegadores coincida con tus requisitos antes de adoptarlo ampliamente.

Preguntas frecuentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..