El nivel 3 de la especificación CSS Grid Layout incluye un masonry valor por grid-template-columns y grid-template-rows. Esta guía detalla qué es el diseño de mampostería y cómo usarlo.

Importante: esta característica solo está implementada en Firefox y se puede habilitar configurando la bandera layout.css.grid-template-masonry-value.enabled para truecon el fin de permitir la prueba y la provisión de comentarios.

El diseño de mampostería es un método de diseño en el que un eje utiliza un diseño de cuadrícula estricto típico, generalmente de columnas, y el otro un diseño de mampostería. En el eje de mampostería, en lugar de adherirse a una cuadrícula estricta dejando espacios después de los elementos más cortos, los elementos de la fila siguiente se elevan para llenar completamente los espacios.

Creación de un diseño de mampostería

Para crear el diseño de mampostería más común, sus columnas serán el eje de la cuadrícula y las filas el eje de la mampostería. Defina este diseño con grid-template-columns y grid-template-rows:

.containerdisplay: grid;gap: 10px;grid-template-columns:repeat(auto-fill,minmax(120px, 1fr));grid-template-rows: masonry;

Los elementos secundarios de este contenedor ahora se distribuirán elemento por elemento a lo largo de las filas, como lo harían con la colocación automática de diseño de cuadrícula normal. Sin embargo, a medida que pasan a una nueva fila, los elementos se mostrarán de acuerdo con el algoritmo de mampostería. Los artículos se cargarán en la columna con más espacio, lo que generará un diseño compacto sin pistas de fila estrictas.

También es posible crear un diseño de mampostería con elementos cargados en filas.

Controlar el eje de la cuadrícula

En el eje de la cuadrícula, las cosas funcionarán tal como espera que funcionen en el diseño de la cuadrícula. Puede hacer que los elementos abarquen varias pistas mientras permanece en la ubicación automática, utilizando el span palabra clave. Los elementos también se pueden colocar utilizando el posicionamiento basado en líneas.

Diseño de mampostería con elementos de expansión

En este ejemplo, dos de los elementos abarcan dos pistas y los elementos de mampostería funcionan alrededor de ellos.

Este ejemplo incluye un elemento que tiene posicionamiento para columnas. Los elementos con ubicación definida se colocan antes de que ocurra el diseño de mampostería.

Control del eje de mampostería

El eje de mampostería opera bajo diferentes reglas ya que sigue las reglas de diseño de mampostería en lugar de las reglas normales de colocación automática de cuadrícula. Para controlar este eje tenemos tres propiedades adicionales definidas en la especificación Grid Level 3 align-tracks, justify-tracksy masonry-auto-flow.

flujo automático de mampostería

Él masonry-auto-flow La propiedad le brinda una forma de cambiar el comportamiento del algoritmo de mampostería. darle un valor de next y los elementos se mostrarán en orden en el eje de la cuadrícula, en lugar de ir a la pista que tenga más espacio libre. El valor positioned ignorará los elementos con una ubicación definida y colocará los elementos en el orden del documento modificado.

alinear pistas

Él align-tracks La propiedad permite la alineación de elementos en contenedores de cuadrícula con mampostería en su eje de bloque. La propiedad alinea los elementos dentro de su pista, de forma muy parecida a como funciona el diseño flexible. La propiedad toma los mismos valores que align-contentsin embargo, puede especificar varios valores para tener diferentes valores de alineación por pista en el eje de la cuadrícula.

Si especifica más valores que pistas, los valores adicionales se ignoran. Si hay más pistas que valores, las pistas adicionales utilizarán el último valor especificado.

justificar-pistas

Él justify-tracks La propiedad funciona de la misma manera que align-tracks, sin embargo, se usa cuando el eje de mampostería es el eje en línea.

Retroceder

En los navegadores que no son compatibles con la mampostería, en su lugar se utilizará la colocación automática de cuadrícula normal.

Ver también