Fecha de publicación: 19 de septiembre de 2024; última actualización: 13 de febrero de 2026
El Grupo de trabajo de CSS combinó las dos propuestas de CSS masonry en una especificación de borrador. El grupo espera que esto facilite la comparación de ambos y la toma de una decisión final. El equipo de Chrome sigue creyendo que una sintaxis de mampostería separada sería la mejor manera de proceder. Si bien se resolvió el mayor problema de rendimiento que se mencionó en nuestra publicación anterior, aún existen inquietudes sobre la sintaxis, los valores iniciales y la facilidad con la que se podría aprender una versión combinada con la cuadrícula.
Sin embargo, para probar nuestras suposiciones, analizamos algunos ejemplos para mostrar cómo funcionaría el diseño de mampostería con cada versión. Echa un vistazo a los ejemplos de esta publicación y envíanos tus comentarios para que podamos tomar una decisión y continuar con esta función.
Esta publicación no abarca todos los casos de uso posibles, pero queda claro que separar el diseño de mampostería del diseño de cuadrícula no hará que la función carezca de funcionalidad. De hecho, podría ser todo lo contrario. Como verás en esta publicación, la versión de display: masonry crea nuevas oportunidades y una sintaxis más simple.
Además, muchos desarrolladores expresaron su preocupación por la posibilidad de que el reordenamiento de elementos con diseño de mampostería cause problemas de accesibilidad. Esto también se abordará para ambas versiones de la sintaxis a través de la propiedad reading-flow propuesta.
Un diseño básico de mampostería
Este es el diseño que la mayoría de las personas se imagina cuando piensa en el diseño de mampostería. Los elementos se muestran en filas y, después de colocar la primera fila, los elementos posteriores se mueven al espacio que dejan los elementos más cortos.
Con display: masonry
Para crear un diseño de mampostería, usa el valor de masonry para la propiedad display. Esto crea un diseño de mampostería con pistas de columna que tú defines (o que define el contenido) y mampostería en el otro eje. El primer elemento se muestra al inicio del bloque y de la línea (por lo tanto, en la parte superior izquierda en inglés), y los elementos se disponen en la dirección de la línea.
Para definir pistas, usa masonry-template-tracks con valores de lista de pistas como se usa en el diseño de cuadrícula CSS.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
Con display: grid
Para crear un diseño de mampostería, primero crea un diseño de cuadrícula con el valor de grid para la propiedad display. Define columnas con la propiedad grid-template-columns y, luego, asígnale a grid-template-rows un valor de masonry.
Esto creará un diseño como el que esperas con elementos de cuadrícula colocados automáticamente. Sin embargo, los elementos de cada fila usan un diseño de mampostería y se reorganizarán para ocupar el espacio que dejan los elementos más pequeños de la fila anterior.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
Puntos a considerar entre las dos opciones
Una diferencia notable entre estos métodos es que, con la versión display: masonry, obtienes un diseño de mampostería incluso si no especificas ningún segmento con masonry-template-tracks. Por lo tanto, display: masonry podría ser todo lo que necesitas.
Esto se debe a que el valor inicial de masonry-template-tracks es repeat(auto-areas, auto). El diseño crea tantas pistas con ajuste automático de tamaño como quepan en el contenedor.
Flujo invertido con diseño de mampostería
La especificación incluye formas de cambiar la dirección del flujo de mampostería. Por ejemplo, puedes cambiar el flujo para que se muestre desde el final del bloque hacia arriba.
Con display: masonry
Crea un diseño de mampostería con display: masonry y, luego, usa masonry-direction con un valor de column-reverse.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
Con display: grid
Crea un diseño de mampostería con display: grid y grid-template-rows: masonry.
Luego, usa la propiedad grid-auto-flow con un valor nuevo de row-reverse para que los elementos se diseñen desde el final del bloque del contenedor de cuadrícula.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
Puntos a considerar entre las dos opciones
La versión de display: masonry se siente muy similar a cómo funciona Flexbox. Cambia la dirección en la que fluyen las columnas con la propiedad masonry-direction con un valor de column-reverse.
La versión de cuadrícula CSS usa grid-auto-flow. Según la definición actual, grid-auto-flow: row-reverse y grid-auto-flow: column-reverse producirían el mismo efecto. Esto podría ser confuso, ya que tal vez esperes que hagan algo diferente.
Diseño de mampostería para filas
También puedes cambiar la dirección para definir filas.
Con display: masonry
Crea un diseño de mampostería con display: masonry y, luego, establece el valor de masonry-direction en row. A menos que quieras que tus filas tengan un tamaño de bloque específico, no es necesario que especifiques ningún tamaño de pista, ya que el valor predeterminado es auto, por lo que las pistas se ajustarán al contenido que contengan.
.masonry {
display: masonry;
masonry-direction: row;
}
Con display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
Puntos a considerar entre las dos opciones
Al igual que con el flujo invertido, cambiar la versión de display: masonry de columnas a filas significa cambiar el valor de masonry-direction. Con la versión de cuadrícula, deberás cambiar los valores de las propiedades grid-template-columns y grid-template-rows. O bien, si usas la abreviatura, cambia el orden de la sintaxis.
En ambos ejemplos de flujo de cambio, la versión display: masonry se siente más intuitiva. Hay una sola propiedad que controla el flujo masonry-direction, que toma uno de los siguientes valores:
rowcolumnrow-reversecolumn-reverse
Luego, agrega la información de tamaño necesaria a masonry-template-tracks, suponiendo que el valor automático predeterminado no es lo que necesitas.
Con la cuadrícula, para invertir la dirección, debes usar la propiedad grid-auto-flow, y para hacer el cambio de mampostería de filas, debes cambiar el valor de las propiedades grid-template-*. Tampoco es posible en la sintaxis de cuadrícula actual dejar sin definir el valor del eje de la cuadrícula. Siempre debes especificar propiedades grid-template-* en el eje que no tenga un valor de masonry.
Coloca elementos
En ambas versiones, puedes posicionar elementos de forma explícita con la colocación basada en líneas que ya conoces del diseño de cuadrícula. En ambas versiones, solo puedes colocar elementos en el eje de la cuadrícula, que es el eje con las pistas predefinidas. No puedes colocar elementos en el eje que realiza el diseño de mampostería.
Con display: masonry
El siguiente código CSS define un diseño de mampostería con cuatro columnas. Por lo tanto, el eje de la cuadrícula son las columnas. El elemento con una clase de a se coloca desde la primera línea de columna hasta la tercera, y abarca dos pistas con las nuevas propiedades de masonry-track-*. También se puede definir como una abreviatura de masonry-track: 1 / 3;.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
Con display: grid
El siguiente código CSS define un diseño de mampostería con cuatro columnas. Por lo tanto, el eje de la cuadrícula son las columnas. El elemento con una clase de a se coloca desde la primera línea de columna hasta la tercera, y abarca dos pistas con las propiedades grid-column-*. También se puede definir como una abreviatura de grid-column: 1 / 3;.
Si el eje de la cuadrícula son las columnas, se ignorarán las propiedades de grid-row-*, y si el eje de la cuadrícula son las filas, se ignorarán las propiedades de grid-columns-*.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
Puedes usar líneas con nombre con ambas sintaxis. En los siguientes ejemplos, se muestra una cuadrícula con dos líneas de columna llamadas a.
Con display: masonry
Las líneas con nombre se definen en el valor de la lista de pistas de masonry-template-tracks. El elemento se puede colocar después de cualquier línea llamada a.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
Con display: grid
Las líneas con nombre se definen en el valor de la lista de pistas de grid-template-columns. El elemento se coloca después de la primera línea llamada a. Si se define la propiedad grid-row, se ignorará.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
También puedes usar áreas con nombre en ambas sintaxis. En los siguientes ejemplos, se muestra una cuadrícula con tres pistas llamadas "a", "b" y "c".
Con display: masonry
Los segmentos se nombran como el valor de masonry-template-areas. Como no se definieron tamaños de pistas, los tres tienen el tamaño predeterminado auto. El elemento se coloca en la pista "a".
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Esto funciona de la misma manera, ya sea que definas filas o columnas. La única diferencia sería la propiedad masonry-direction.
Con display: grid
Para las columnas, la sintaxis es prácticamente idéntica. Del mismo modo, como no se definen tamaños de pista, los tres se establecen de forma predeterminada en el tamaño auto, pero aún debes indicar de forma explícita que el otro eje es de mampostería:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
Sin embargo, para las filas, el valor se debe escribir de manera diferente, ya que grid-template-areas en realidad define un área bidimensional, y cada fila se escribe como una cadena separada:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
Puntos a considerar entre las dos opciones
Con cualquier posicionamiento, la sintaxis display: masonry funciona mejor cuando se trata de cambiar de dirección. Como la propiedad masonry-track-* funciona en cualquier dirección del eje de la cuadrícula, lo único que debes hacer para cambiar la dirección es cambiar el valor de masonry-direction. Con la versión de cuadrícula, como mínimo, necesitarás propiedades redundantes para habilitar el cambio. Sin embargo, consulta los ejemplos anteriores para ver otras formas en las que cambiar de dirección es más complicado con la versión de cuadrícula.
Abreviaturas
En esta publicación, se usaron las versiones completas para que quede más claro qué propiedades se usan. Sin embargo, tanto las versiones display: masonry como las display: grid se pueden definir con abreviaturas.
Con display: masonry
La abreviatura display: masonry usa la palabra clave masonry. Para crear el diseño básico de mampostería, usa el siguiente código CSS:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
Para crear un diseño de mampostería simple basado en filas, haz lo siguiente:
.masonry {
display: masonry;
masonry: row;
}
Para definir pistas y un diseño basado en filas con la abreviatura, haz lo siguiente:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
Con display: grid
Para crear el diseño básico de mampostería con la abreviatura grid
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
Para crear un diseño de mampostería simple basado en filas, haz lo siguiente:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
En ejemplos más complejos, debido a que la sintaxis general de display:masonry es más simple, se pueden incluir más propiedades en la abreviatura sin que se vuelva demasiado compleja.
Por ejemplo, imagina que creas tres columnas, llamadas "a", "b" y "c", que se completan de abajo hacia arriba.
Con display:masonry
En display: masonry, los tres se pueden configurar juntos en la abreviatura:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Como tienen un tamaño automático, no es necesario que especifiques los tamaños, pero, si quisieras un tamaño específico, podrías agregarlo. Por ejemplo: masonry: column-reverse 50px 100px 200px "a b c";
Además, cada componente se puede reordenar libremente; no hay un orden específico que debas recordar. Y si quisieras hacer filas, todo lo que necesitas hacer es intercambiar column-reverse por row o row-reverse; el resto de la sintaxis sigue siendo el mismo.
Con display: grid
En display: grid, estos tres aspectos se deben configurar por separado:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Al igual que en el ejemplo de mampostería, esto hace que todas las columnas tengan el tamaño auto, pero si deseas proporcionar tamaños explícitos, puedes hacerlo de la siguiente manera:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
O bien, si quieres usar "grid" para establecer tamaños y nombres de áreas al mismo tiempo:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
En ambos ejemplos, el orden es estrictamente necesario y diferente si quisieras filas. Por ejemplo, el cambio a filas se ve de la siguiente manera:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
O, para resumir todo en una sola abreviatura:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
Puntos a considerar entre las dos opciones
Es probable que la abreviatura display: masonry se use de forma generalizada, ya que es relativamente sencilla. En muchos casos, para un diseño de mampostería "estándar", solo tendrás que establecer las definiciones de pista. Todos los demás valores pueden asumir el valor predeterminado.
La versión display: grid usa la abreviatura grid existente, que es bastante compleja y, según nuestra experiencia, los desarrolladores no la usan con frecuencia. Como se muestra en los ejemplos anteriores, incluso cuando se usa para diseños de mampostería simples, se requiere cuidado al establecer el orden de los valores.
Otras consideraciones
En esta entrada, se analizan algunos casos de uso comunes en la actualidad. Sin embargo, no sabemos qué deparará el futuro para las cuadrículas o el diseño de mampostería. Un argumento importante para usar la sintaxis display: masonry separada es que permite que los dos diverjan en el futuro. En particular, con los valores iniciales, como los de masonry-template-tracks, podría ser útil hacer algo diferente en el diseño de mampostería que en el de cuadrícula. No podemos cambiar los valores predeterminados de la cuadrícula si usamos la versión de display: grid, lo que podría limitar las acciones que queramos realizar en el futuro.
En estos ejemplos, puedes ver lugares donde el navegador tiene que ignorar propiedades que son válidas en la cuadrícula si se usa el diseño de mampostería.
Por ejemplo, grid-template-areas, donde la mayoría de los valores se descartan, ya que define un diseño de cuadrícula bidimensional. En el diseño de mampostería, solo definimos por completo una dirección.
Envía tus comentarios
Consulta estos ejemplos y el borrador de la especificación, que presenta cada versión junto con la otra. Comenta el problema 9041 para contarnos qué te parece o, si prefieres escribir una publicación en tu propio blog o en redes sociales, no olvides avisarnos en X o LinkedIn.