Te traemos el arreglo a este atascamiento, al menos eso pensamos. Si continuas con inquietudes dínoslo, que para nosotros será un placer responderte
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 true
con 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-tracks
y 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-content
sin 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
Al final de la página puedes encontrar las explicaciones de otros gestores de proyectos, tú aún tienes el poder dejar el tuyo si te apetece.