Cómo crear layouts tipo Masonry con display: grid-lanes en CSS (sin JavaScript) — Guía práctica con ejemplos

En esta guía vas a aprender a construir un diseño tipo *masonry* de forma nativa en CSS usando display: grid-lanes. Incluye explicaciones claras y ejemplos de código listos para usar, además de técnicas de compatibilidad para navegadores que todavía no soportan la sintaxis.

¿Qué es un Masonry Layout?

Un *masonry layout* es un patrón visual donde los elementos de diferente altura se agrupan en columnas de manera que se elimina el espacio vertical innecesario entre ellos, generando un efecto de muro de ladrillos dinámico que se adapta al contenido.

CSS Grid-Lanes: la forma moderna de Masonry en CSS

La sintaxis display: grid-lanes permite activar un tipo de comportamiento de grid donde los elementos se colocan automáticamente en columnas (“lanes”), rellenando huecos verticales de forma eficiente sin necesidad de JavaScript ni librerías externas. Con ello se logra un resultado muy similar a los tradicionales layouts tipo Pinterest.

Ejemplo básico de Masonry con Grid-Lanes

HTML para la galería o lista de ítems seria el tipico div con mas contenedores dentro.

CSS para activar el layout tipo *masonry*:

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

.item {
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #ddd;
}
  

Con este CSS, el contenedor se convierte en un grid con “carriles” flexibles definidos por las columnas, y los elementos se colocan en la columna que mejor aproveche el espacio vertical disponible.

Control avanzado del flujo de elementos

Puedes combinar display: grid-lanes con cualquier otra propiedad de CSS Grid (como grid-template-columns más complejas, valores fijos, fracciones mixtas, etc.) para adaptar el diseño a tus necesidades visuales.

Compatibilidad y fallbacks

Al ser una característica relativamente nueva, no todos los navegadores tienen soporte estable todavía. Por eso, es una buena práctica ofrecer un fallback que use CSS Grid tradicional con colocación automática densa para acercarse visualmente al efecto *masonry*.

Fallback con CSS Grid tradicional

.masonry-fallback {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

.masonry-fallback .item {
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #ddd;
}
  

Este fallback no es un *masonry* perfecto, pero ayuda a que el contenido quede distribuido de forma más compacta cuando no hay soporte para grid-lanes.

Cuándo usar este layout

• Galerías de imágenes responsivas.
• Listados de productos con descripciones de tamaños variables.
• Portafolios visuales o tarjetas de contenido.
• Blogs con entradas de diferente longitud.

Conclusión

El uso de display: grid-lanes representa un avance importante para lograr diseños tipo *masonry* directamente con CSS sin JavaScript adicional. Su sintaxis es simple y poderosa, y con un buen fallback puedes asegurarte de que tu diseño se vea bien incluso en navegadores sin soporte nativo aún.