Fecha de publicación: 23 de julio de 2025
Los equipos de Microsoft Edge y Google Chrome se complacen en anunciar que CSS masonry está listo para las pruebas tempranas de desarrolladores en Chrome y Edge 140.
Como aún quedan problemas abiertos en torno a la especificación y la sintaxis de CSS masonry, tus comentarios son fundamentales para ayudarnos a consolidar la forma final de la API. Prueba la función y danos tu opinión.
Prueba CSS Masonry en Chromium hoy mismo
Para probar CSS Masonry hoy mismo, sigue estos pasos:
- Usa Chrome o Edge 140 o versiones posteriores (o cualquier otro navegador basado en Chromium con una versión coincidente).
- Ve a
about:flagsen una pestaña nueva. - Busca "CSS Masonry Layout".
- Habilita la marca.
- 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 el diseño de mampostería?
El diseño de mampostería en CSS es un modo de diseño que te permite crear una disposición de elementos similar a la de una pared de ladrillos, de una manera que no se puede lograr fácilmente con la cuadrícula de CSS, Flexbox o el diseño de varias columnas.
El diseño de mampostería de CSS se puede usar para organizar elementos en formato de columna o fila, con elementos colocados dentro de esas columnas o filas de forma contraída.
Piensa en el diseño de mampostería como una autopista, en la que la única restricción es la cantidad y el tamaño de los diferentes carriles. Dentro de los carriles, los vehículos pueden tener la longitud que quieran 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 diseño solo están restringidos en una dirección y pueden expandirse libremente en la otra, independientemente de otros elementos cercanos. El diseño de mampostería se diferencia del diseño de cuadrícula 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. Masonry te permite aprovechar al máximo el espacio disponible, sin importar los elementos que tengas. Esto la convierte en una excelente opción para las páginas con mucho contenido visual y en las que el orden visual del contenido no es tan importante como el resultado final.
Un aspecto interesante de la disposición en mampostería es que también permite que los elementos abarquen varios carriles, al igual que con la cuadrícula. Cuando eso sucede, los elementos se siguen colocando de manera que se llene la mayor cantidad posible del espacio disponible.
Este comportamiento de colocación automática puede generar resultados muy interesantes, que los diseñadores web han intentado 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 y, al mismo tiempo, permitir que ciertos elementos (el título en este ejemplo) abarquen varias columnas:
Estos son algunos otros ejemplos de lo que se puede hacer con el diseño de mampostería.
Diseño de un blog en el que se muestran la miniatura y la descripción de cada entrada.
Un sitio de noticias en el que los artículos aparecen en columnas, algunos artículos son más anchos que otros y las imágenes principales abarcan todo el ancho de la página.
Una colección de fotos con diferentes tamaños de columna y algunas fotos que abarcan varias columnas.
Soluciones alternativas y sus limitaciones
Actualmente, implementar este patrón de diseño en la Web requiere que uses bibliotecas de JavaScript o soluciones alternativas que usen cuadrícula CSS, Flexbox o varias columnas. Sin embargo, esto puede tener desventajas, como las siguientes:
- Menor rendimiento: Depender de bibliotecas de JavaScript o código personalizado para imitar el diseño de mampostería de CSS conlleva compensaciones de rendimiento, lo que puede generar experiencias negativas para el usuario.
- Mayor complejidad del código:
- Garantizar la colocación correcta de los elementos y la distribución del espacio dentro de la cuadrícula CSS, Flexbox o varias columnas para imitar un diseño de mampostería CSS es difícil de lograr.
- El manejo de funciones específicas, como elementos que abarcan más de una columna o fila, el orden personalizado de los elementos o el ajuste a la ventana gráfica, 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 CSS es un modo de diseño increíble que es muy flexible y te permite crear muchos estilos diferentes de diseños, 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 el diseño de 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 sus respectivas celdas, deberás elegir entre dejar espacios entre los elementos o estirarlos para llenar el espacio vacío.
Al igual que en el diseño de mampostería, Flexbox solo se preocupa por 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 parezca a un diseño de mampostería con Flexbox, siempre y cuando te parezca bien que los elementos se diseñen en la dirección del bloque, una columna a la vez. El contenedor flexible también necesitará un tamaño de bloque o una altura definidos para que los elementos se ajusten a una nueva línea flexible y, de este modo, se cree una nueva columna.
El diseño de varias columnas también puede crear un diseño que se vea como mampostería, y volver a organizar los elementos en columnas. Además, la opción de varias columnas no te permite ajustar el tamaño de cada columna de forma diferente. Todos tienen el mismo tamaño, mientras que el diseño de mampostería proporciona mucha flexibilidad a la hora de definir los carriles dentro de los cuales se empaquetan los elementos.
El punto que debes recordar aquí no es que la cuadrícula, Flexbox o el diseño de varias columnas sean peores que el diseño de 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, el CSS de mampostería es lo que te lo proporcionará.
El estado de CSS Masonry
El grupo de trabajo de CSS está redactando la especificación de mampostería en CSS Grid Level 3. La especificación aún está en construcción y, por el momento, incluye dos sintaxis propuestas diferentes. El primero de estos usa una nueva palabra clave para la propiedad display, mientras que en el segundo, el diseño de mampostería se integra directamente en el diseño de cuadrícula de CSS.
Usa display: masonry
Esta sintaxis introduce la disposición en columnas de CSS como su propio tipo display. Puedes encontrar más detalles sobre el enfoque y su motivación en la entrada de blog Se necesita comentarios: ¿Cómo deberíamos definir la mampostería de CSS? 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 disposición en columnas 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 Ayúdanos a elegir la sintaxis final para Masonry en CSS.
Ten en cuenta que una alternativa a esta propuesta es la propiedad item-pack y la palabra clave collapse, que activarían la disposición en columnas 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 ha seguido debatiendo sobre la sintaxis general para avanzar. Tus comentarios pueden ayudar a orientar el desarrollo futuro en estos foros.
Para obtener más detalles sobre el estado actual de los debates, consulta el problema 11593, en el que se describen los temas de debate actuales 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 y creemos un diseño de mampostería CSS.
Aunque la sintaxis de CSS Masonry aún está en debate, nuestra implementación de la función se puede probar en Chromium hoy mismo. Para ello, habilita la marca CSS Masonry Layout, como se explica en Cómo probar CSS Masonry hoy. En los siguientes ejemplos, se muestra lo que está disponible en la versión de 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 ligeramente de la propuesta original de Google. Independientemente del activador que se use para CSS Masonry, el CSS Working Group resolvió reutilizar las propiedades de tamaño y ubicación de la plantilla de cuadrícula dentro del diseño de CSS Masonry.
Si bien esto permite una mayor reutilización de propiedades entre los tipos de diseño, es posible que te resulte confuso, y nos encantaría conocer tu opinión sobre el tema. Podemos explorar 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 se podrían usar tanto para la cuadrícula como para el diseño de mampostería.
Cómo usar 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, que, según la definición actual, suele generar una sola columna o fila. En el caso de la disposición en 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 tamaños de pista:
.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 ajusten los tamaños de las pistas, lo que significa que esta definición de ajuste automático de tamaño de la pista no es posible. Sin embargo, con CSS masonry, esta restricción ya no se aplica, ya que la colocació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ó anteriormente, la implementación actual en Chromium se basa en las propiedades grid-template-* para definir el carril de mampostería en tu diseño.
Sin embargo, como el diseño de mampostería tiene solo una dimensión, también implementamos la propiedad abreviada masonry, que puedes usar para definir la dirección del diseño de 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 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"
}
El grupo de trabajo de CSS aún está debatiendo la abreviatura masonry. Pruébala hoy y envíanos tus comentarios.
Usar tamaños de pista personalizados
Cuando se trata de definir los tamaños de las pistas, el diseño de mampostería es tan flexible como el diseño de cuadrícula para permitirte ajustar la cantidad y los tamaños de las pistas de diseño. Las pistas de mampostería tampoco tienen que tener el mismo tamaño, por ejemplo:
.masonry {
display: masonry;
masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}
En este ejemplo, definimos dos pistas de 3 rem, seguidas de una cantidad variable de pistas de 5 rem y, luego, una sola pista de 12 rem.
Abarcan varias pistas
En el diseño de mampostería, los elementos no tienen que estar restringidos a los carriles en los que se colocan, ya que pueden abarcar varios carriles 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 duración del contenedor:
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.full-bleed {
grid-column: 1 / -1;
}
Así es como la demostración del sitio de noticias muestra el anuncio de suscripción dentro de los artículos.
Cómo ajustar 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 la fuente, usa la propiedad item-tolerance.
La nueva propiedad item-tolerance controla la sensibilidad en la colocación de elementos.
En el ejemplo anterior, puedes aplicar item-tolerance: 10px; a tu contenedor para personalizar la variabilidad en la colocación de 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. Recientemente, el CSS Working Group decidió 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 dimensionar y colocar elementos en el eje de la cuadrícula de un contenedor de mampostería, como lo haces con la cuadrícula de CSS, por ejemplo, grid-row, grid-column, grid-area, grid-template-areas o order.
Experimenta todo el potencial de la cuadrícula CSS cuando crees tu diseño de mampostería.
Solicitud de comentarios
Estamos ansiosos por que explores el diseño de mampostería con CSS, te pongas creativo y descubras las nuevas capacidades que te puede ayudar a desbloquear. Una excelente manera de comenzar es consultar nuestras demostraciones y su código fuente, y comenzar a crear tus propios ejemplos en Chromium (recuerda habilitar la marca primero).
Tus comentarios son importantes para ayudarnos a darle forma a la API y verificar que esté diseñada para satisfacer tus necesidades en la Web. Prueba el diseño de mampostería y dinos qué te parece.
Si tienes ideas o comentarios sobre la forma de la API, infórmanos dejando un comentario en el problema 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 disposición de mampostería de CSS aún se está implementando en Chromium. Si la pruebas, ten en cuenta que aún estamos trabajando en ella y que es posible que encuentres casos en los que no se comporte como esperas. Algunas de las limitaciones actuales incluyen el empaquetado denso, la colocación inversa, la compatibilidad con subcuadrículas, la compatibilidad fuera del flujo, la compatibilidad con la línea de base, la compatibilidad con DevTools, la compatibilidad con la fragmentación y la compatibilidad con la decoración de brechas, entre otras.
Si encuentras un error mientras pruebas la función, comparte tus comentarios abriendo un nuevo error de Chromium.