CSS Masonry Nativo: El Fin de las Librerías Grid

Mirá, si alguna vez tuviste que implementar un diseño tipo Pinterest, sabés el dolor de cabeza que es. Masonry.js pesa 24KB, inyecta estilos inline, forza recálculos de layout constantes y se rompe cuando cargás contenido asíncrono. Tras 15 años de esa dependencia, CSS Grid Level 3 trajo display: grid-lanes[^1]: la solución nativa que mueve el layout del event loop de JavaScript al motor del navegador. 0KB de JS, repintado automático, y accesibilidad nativa.

La sintaxis que reemplaza 24KB de JavaScript

El debate de 5 años en el CSSWG terminó. Olvidate de la vieja propuesta grid-template-rows: masonry de Firefox Nightly[^2]. El estándar oficial es grid-lanes.

/* ❌ Propuesta obsoleta (Firefox experimental) */
.gallery {
display: grid;
grid-template-rows: masonry;
}

/* ✅ Estándar 2026 (Safari TP / Chrome 140+ flag) */
.gallery {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--space-md);
}

Performance: Engine nativo vs Event Loop

La ganancia no es solo estética; es de ingeniería pura. En un entorno donde el LCP (Largest Contentful Paint) es rey, eliminar el hilo de ejecución de JavaScript para algo tan crítico como el posicionamiento de elementos es una victoria rotunda — especialmente para usuarios en Paraguay con redes móviles inestables. Esta filosofía de Zero-JS layout es la misma que aplico en mi portfolio con Lighthouse 100 y que complementa el uso de CSS Layers para arquitectura limpia.

| Solución | Tamaño | Runtime | | --------------------- | ------- | -------------- | | Masonry.js | 24KB | JS event loop | | Alternativas modernas | 1.4-6KB | JS | | CSS Grid Lanes | 0KB | Browser engine |

Con infinite scroll, las librerías JS requieren recalcular manualmente en cada append(). Con grid-lanes, el browser lo hace automático.

Fallback: Progressive Enhancement hoy

No tenés que esperar a que todos los browsers lo activen por defecto. Podés usar Progressive Enhancement con @supports. Si el browser no entiende grid-lanes, cae a un Grid estándar:

/* Fallback: Grid regular para browsers sin soporte */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
}

/* Enhancement: Masonry nativo para browsers con soporte */
@supports (display: grid-lanes) {
  .card-grid {
    display: grid-lanes;
  }
}

O si preferís el patrón de doble declaración (más conciso):

.card-grid {
  display: grid;
  display: grid-lanes; /* Ignorado en browsers sin soporte */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

Estado actual del soporte

¿Ya probaste esta sintaxis? Escribime si tenés dudas sobre cómo implementar el fallback correcto para tus proyectos.

[^1]: CSSWG resolution, Enero 2025. Ver CSS Grid Level 3.

[^2]: Firefox Nightly usaba grid-template-rows: masonry entre 2020-2024. Ver Mozilla Hacks.