Ladrillo a ladrillo: Ayúdanos a crear CSS Masonry

Patrick Brosset

Alison Maher

Fecha de publicación: 23 de julio de 2025; última actualización: 13 de febrero de 2026

Los equipos de Microsoft Edge y Google Chrome se complacen en anunciar que la cuadrícula CSS está lista para las pruebas tempranas de los desarrolladores a partir de Chrome y Edge 140.

Dado que aún quedan problemas abiertos relacionados con la especificación y la sintaxis de la mampostería de CSS, tus comentarios son fundamentales para ayudarnos a consolidar la forma final de la API. Prueba la función y danos tu opinión.

Prueba la cuadrícula CSS en Chromium hoy mismo

Para probar CSS Masonry hoy mismo, sigue estos pasos:

1. Usa Chrome o Edge 140 o una versión posterior (o cualquier otro navegador basado en Chromium con una versión coincidente).
2. Ve a about:flags en una pestaña nueva.
3. Busca "CSS Masonry Layout".
4. Habilita el parámetro.
5. Reinicia el navegador.

Con la función habilitada, puedes verla en acción consultando las demostraciones de Microsoft Edge (consulta el código fuente de las demostraciones) o sigue leyendo para obtener más información sobre la función y la sintaxis disponible.

¿Qué es la mampostería?

La mampostería de CSS es un modo de diseño que te permite crear una disposición de elementos similar a un ladrillo, de una manera que no se puede lograr fácilmente con la cuadrícula de CSS, flexbox o el diseño de varias columnas.

La mampostería de CSS se puede usar para organizar elementos en un formato de columna o fila con elementos colocados dentro de esas columnas o filas de forma contraída.

Piensa en la mampostería como una autopista, en la que la única restricción es la cantidad y el tamaño de los diferentes carriles de conducción. Dentro de los carriles, los vehículos pueden tener cualquier longitud que deseen y siempre intentan estar lo más cerca posible de su destino, que es el inicio del diseño de mampostería.

Los elementos de tu diseño solo están restringidos en una dirección y pueden respirar libremente en la otra, independientemente de otros elementos que estén cerca. Masonry es diferente de Grid en que sus pistas solo se definen en una dirección.

En el diseño de mampostería, el orden visual de los elementos es menos importante que el diseño final. La mampostería te permite aprovechar al máximo el espacio disponible, independientemente de los elementos que tengas. Esto lo convierte en una excelente opción para páginas con un uso intensivo de elementos visuales y en las que el orden visual del contenido no importa tanto como el resultado final.

Un aspecto interesante de la mampostería es que también permite que los elementos abarquen varias pistas, al igual que con la cuadrícula. Cuando eso sucede, los elementos se siguen colocando de manera que ocupen la mayor cantidad de espacio disponible posible.

Este comportamiento de ubicación automática puede generar resultados muy interesantes, que los diseñadores web intentaron lograr durante mucho tiempo. Por ejemplo, consulta la demostración de la galería de fotos de la ciudad de Nueva York, que muestra cómo se pueden mostrar las fotos de forma compacta en varias columnas, mientras que permite que ciertos elementos (el título en este ejemplo) abarquen varias columnas:

Estos son algunos otros ejemplos de los usos que se le puede dar a la mampostería.

Un diseño de blog que muestra la miniatura y la descripción de cada publicación.

Un sitio de noticias, en el que los artículos aparecen en columnas, algunos de ellos son más anchos que otros y las imágenes hero abarcan todo el ancho de la página.

Una colección de fotos, con diferentes tamaños de columnas y algunas fotos que abarcan varias columnas.

Soluciones alternativas y sus limitaciones

Para implementar este patrón de diseño en la Web hoy en día, debes usar bibliotecas de JavaScript o soluciones alternativas que usen cuadrícula, flexbox o varias columnas de CSS. Sin embargo, esto puede tener desventajas, como las siguientes:

• Rendimiento más bajo: Depender de bibliotecas de JavaScript o código personalizado para imitar la mampostería de CSS implica compensaciones de rendimiento, lo que puede generar experiencias del usuario negativas.
• Mayor complejidad del código:
  • Garantizar la ubicación correcta de los elementos y la distribución del espacio dentro de la cuadrícula de CSS, flexbox o varias columnas para imitar un diseño de mampostería de CSS es difícil de lograr.
  • El manejo de funciones específicas, como los elementos que abarcan más de una columna o fila, el orden personalizado de los elementos o el ajuste al viewport, también puede generar complejidad y limitaciones.
• Mayor carga de mantenimiento: El código CSS o JavaScript personalizado complejo es más difícil de mantener.

La cuadrícula de CSS es un modo de diseño increíble que es muy flexible y te permite crear muchos estilos de diseño diferentes, ya sea para una página web completa, un componente o solo para alinear elementos individuales. Sin embargo, no tiene las mismas características que la mampostería.

En la cuadrícula de CSS, las filas y las columnas se definen de forma rígida, y los elementos solo pueden existir dentro de las celdas de la cuadrícula. Si intentas empaquetar elementos a lo largo de uno de los ejes, pero los elementos no tienen el tamaño adecuado para caber en sus respectivas celdas, tendrás que elegir entre dejar espacios entre los elementos o estirarlos para llenar el espacio vacío.

Al igual que la mampostería, a flexbox solo le importa una dirección y permite que los elementos decidan el espacio que quieren ocupar en la otra dirección. Esto significa que puedes obtener un diseño que se vea como un diseño de mampostería con flexbox, siempre y cuando estés de acuerdo con que los elementos se dispongan en la dirección del bloque, una columna a la vez. El contenedor flex también necesitará un tamaño de bloque o una altura definidos para que los elementos se ajusten a una nueva línea flex, lo que creará una nueva columna.

Las columnas múltiples también pueden crear un diseño que se parezca a la mampostería, lo que, de nuevo, organiza los elementos en columnas. Además, el diseño de varias columnas no te permite ajustar el tamaño de cada una de ellas de forma diferente. Todos tienen el mismo tamaño, mientras que la mampostería proporciona mucha flexibilidad a la hora de definir las pistas en las que se empaquetan los elementos.

El punto que debes recordar aquí no es que la cuadrícula, la caja flexible o las columnas múltiples sean peores diseños que la mampostería. Son excelentes tipos de diseños que tienen muchos casos de uso. El punto es que, si lo que quieres es un diseño de mampostería, la mampostería de CSS es lo que te lo dará.

El estado de la cuadrícula masonry de CSS

El grupo de trabajo de CSS está redactando el diseño de mampostería en la especificación de CSS Grid de nivel 3. La especificación aún está en construcción y, de forma temporal, incluye dos sintaxis propuestas diferentes. La primera de ellas usa una palabra clave nueva para la propiedad display, mientras que en la segunda, la mampostería se integra directamente en el diseño de cuadrícula de CSS.

Usar display: masonry

Esta sintaxis presenta la cuadrícula masonry de CSS como su propio tipo de display. Puedes encontrar más detalles sobre el enfoque y su motivación en la entrada de blog Feedback needed: How should we define CSS masonry? del equipo de Google Chrome, así como en la sección restante de esta entrada. El prototipo actual en Chromium se basa en esta propuesta.

display: grid; grid-template-*: masonry;

En esta sintaxis, la mampostería de CSS se integra directamente en la cuadrícula de CSS. El modo de mampostería se activa aplicando la palabra clave masonry a la definición de grid-template-columns en el caso de un diseño de mampostería basado en filas o a la definición de grid-template-rows en el caso de un diseño de mampostería basado en columnas.

Puedes encontrar más detalles sobre esta propuesta y su motivación en la publicación de WebKit Help us choose the final syntax for Masonry in CSS.

Ten en cuenta que una alternativa a esta propuesta es la propiedad item-pack y la palabra clave collapse, que activarían la mampostería de CSS en lugar de usar una de las dos propiedades de plantilla de cuadrícula.

Desde la publicación de las entradas de los equipos de Chrome y WebKit, el CSSWG continuó con los debates sobre la sintaxis general para avanzar. Tus comentarios pueden ayudar a fundamentar el desarrollo futuro de estos foros.

Para obtener más detalles sobre el estado actual de las discusiones, consulta el problema 11593, que describe el conjunto actual de temas de discusión sobre la sintaxis de mampostería, y el problema 11243 para obtener un resumen del debate sobre la sintaxis hasta el momento.

Crea tu propio diseño de mampostería de CSS

Divirtámonos un poco y creemos un diseño de mampostería de CSS.

Aunque la sintaxis de CSS Masonry aún está en discusión, nuestra implementación de la función se puede probar en Chromium hoy mismo habilitando la marca CSS Masonry Layout, como se explica en Prueba CSS Masonry hoy mismo. En los siguientes ejemplos, se muestra lo que está disponible en la prueba para desarrolladores.

Crea un contenedor de mampostería

Para crear tu primer contenedor de mampostería basado en columnas, usa display:masonry y define los tamaños de las columnas con grid-template-columns. Dado que masonry-direction se establece de forma predeterminada en column, configurar esta propiedad es opcional.

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

En cambio, para un contenedor de mampostería basado en filas, usa display:masonry, define los tamaños de las filas con grid-template-rows y, luego, establece masonry-direction:row.

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

Como habrás notado, esta sintaxis difiere un poco de la propuesta original de Google. Independientemente del activador que se use para la cuadrícula de CSS, el CSS Working Group decidió reutilizar las propiedades de tamaño y ubicación de la plantilla de cuadrícula dentro del diseño de cuadrícula de CSS.

Si bien esto permite una mayor reutilización de propiedades entre los tipos de diseño, es posible que te resulte confuso, y nos gustaría conocer tu opinión al respecto. Es posible que exploremos la creación de alias más genéricos para propiedades como grid-template-columns y grid-template-rows, como template-columns o template-rows, que podrían usarse tanto para la cuadrícula como para la mampostería.

Usa el tamaño de pista predeterminado

Con un nuevo tipo de pantalla, surge la oportunidad de repensar los valores predeterminados de las propiedades.

En la cuadrícula, grid-template-columns y grid-template-rows se establecen de forma predeterminada en none, lo que, como se define actualmente, suele dar como resultado una sola columna o fila. En el caso de la mampostería, este valor predeterminado, en la mayoría de los casos, generaría un diseño no deseado.

La implementación en Chromium agrega la definición propuesta recientemente para none, que reemplazará el tamaño de pista predeterminado en la mampostería de CSS. Este nuevo tamaño de pista predeterminado es el valor repeat(auto-fill, auto). Este valor crea un diseño de mampostería agradable sin tener que definir los tamaños de las pistas:

.masonry {
  display: masonry;
  gap: 10px;
}

Como se muestra en la imagen, el contenedor de mampostería crea tantas columnas de tamaño automático como quepan en el espacio disponible.

Con la cuadrícula de CSS, todos los elementos se colocan antes de que se ajuste el tamaño de las pistas, lo que significa que no es posible definir el tamaño automático de esta pista. Sin embargo, con la mampostería de CSS, esta restricción ya no se aplica, ya que la ubicación y el tamaño están entrelazados y simplificados. Con esta restricción eliminada, podemos proporcionar un tamaño predeterminado de pista más útil para los diseños de mampostería.

Prueba la propiedad abreviada masonry

Como se mencionó antes, la implementación actual en Chromium se basa en las propiedades grid-template-* para definir la pista de mampostería en tu diseño. Sin embargo, como la mampostería tiene una sola dimensión, también implementamos la propiedad abreviada masonry, que puedes usar para definir la dirección de la mampostería y la definición de la pista de una sola vez, sin la confusa propiedad con el prefijo grid-.

Por ejemplo, los siguientes dos fragmentos de código crearán contenedores de mampostería de CSS equivalentes.

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

La abreviatura masonry aún está en discusión por parte del grupo de trabajo de CSS. Pruébalo hoy y danos tu opinión.

Usa tamaños de pistas personalizados

Cuando se trata de definir los tamaños de las pistas, la mampostería es tan flexible como la cuadrícula para permitirte ajustar la cantidad y los tamaños de las pistas de diseño. Tampoco es necesario que todas las pistas de mampostería tengan el mismo tamaño, por ejemplo:

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

En este ejemplo, definimos dos primeras pistas de 3rem, seguidas de una cantidad variable de pistas de 5rem, seguidas de una sola pista de 12rem.

Abarcar varias pistas

En la mampostería, los elementos no tienen que limitarse a los segmentos en los que se colocan, ya que pueden abarcar varios segmentos si es necesario. Esto puede ser muy útil cuando algunos elementos son más importantes que otros y requieren más espacio.

Por ejemplo:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

También puedes usar esta capacidad para abarcar varias pistas y hacer que ciertos elementos ocupen toda la longitud del contenedor:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

Esto es lo que usa la demostración del sitio de noticias para mostrar el anuncio de suscripción dentro de los artículos.

Ajusta la ubicación de los elementos de mampostería

En CSS Masonry, los elementos se colocan en la columna o fila que tiene la posición de ejecución más corta.

Imagina un contenedor de mampostería de dos columnas. Si el contenedor tiene un elemento de 110 px de alto en la primera columna y un elemento de 100 px de alto en la segunda columna, se colocará un tercer elemento en la segunda columna, donde estará 10 px más cerca del inicio de la dirección de mampostería.

Si consideras que una diferencia de 10 px en la posición de ejecución es lo suficientemente pequeña para tu caso y prefieres que el tercer elemento se coloque en la primera columna para que coincida mejor con el orden de origen, usa la propiedad item-tolerance.

La nueva propiedad item-tolerance controla la sensibilidad en la ubicación de los elementos.

En el ejemplo anterior, puedes aplicar item-tolerance: 10px; a tu contenedor para personalizar la variabilidad en la ubicación de los elementos:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

Ten en cuenta que la especificación del borrador llama a esta propiedad item-slack. El CSS Working Group resolvió recientemente usar item-tolerance como nombre, y la especificación se actualizará pronto.

Otras propiedades disponibles

Puedes usar las mismas propiedades de tamaño y ubicación de la plantilla para ajustar el tamaño y colocar elementos en el eje de la cuadrícula de un contenedor de mampostería, como lo harías con la cuadrícula de CSS, como grid-row, grid-column, grid-area, grid-template-areas o order. Experimenta todo el poder de la cuadrícula de CSS cuando crees tu diseño de mampostería.

Solicitud de comentarios

Estamos ansiosos por que explores la mampostería de CSS, te pongas creativo y descubras las nuevas capacidades que puede ayudarte a desbloquear. Una excelente manera de comenzar es consultar nuestras demostraciones y su código fuente, y comenzar a compilar tus propios ejemplos en Chromium (recuerda habilitar primero la marca).

Tus comentarios son importantes para ayudarnos a dar forma a la API y verificar que esté diseñada para satisfacer tus necesidades en la Web. Prueba la mampostería y dinos qué te parece.

Si tienes ideas o comentarios sobre la forma de la API, deja un comentario en el error 11243 o, si prefieres escribir una publicación en tu propio blog o en redes sociales, asegúrate de informarnos en X o LinkedIn.

La mampostería de CSS aún se está implementando en Chromium. Si lo pruebas, ten en cuenta que aún estamos trabajando activamente en él y que es posible que encuentres casos en los que no se comporte como se espera. Algunas de las limitaciones actuales incluyen el empaquetado denso, la ubicación inversa, la compatibilidad con subcuadrículas, la compatibilidad con fuera de flujo, la compatibilidad con el modelo de referencia, la compatibilidad con DevTools, la compatibilidad con la fragmentación y la compatibilidad con la decoración de espacios, entre otras.

Si encuentras un error mientras pruebas la función, abre un nuevo error de Chromium para compartir tus comentarios.