Cómo construir un diseño de mampostería usando CSS

¿Qué es el diseño de mampostería?

El diseño de mampostería es cuando se disponen elementos de diferentes tamaños para que no haya espacios irregulares. Por lo general, cuando los elementos están en una vista de cuadrícula, se alinean en filas, en columnas o en ambos. Pero en un diseño de mampostería, incluso si hay un elemento más corto en una fila o columna, el siguiente elemento ocupará el espacio.

¿Cómo lograr el diseño de mampostería?

Hay muchas maneras de lograr esto, pero una de las mejores es usar grid-template-columns y usar la función repeat() . Entonces empecemos.

La propiedad grid-template-columns

Además del tamaño de columna explícito, uno de los aspectos más valiosos y prácticos de CSS Grid es la capacidad de repetir columnas hasta que se llenen y luego colocar elementos automáticamente en ellas. En particular, la opción de especificar la cantidad de columnas que queremos en la cuadrícula y luego darle al navegador el control de la capacidad de respuesta de esas columnas da como resultado que se muestren menos columnas en tamaños de ventana gráfica más pequeños y se muestren más columnas a medida que aumenta el ancho de la pantalla.

Esto se logra mediante el uso de la función repeat() y las palabras clave de ubicación automática. En resumen, la función repeat() nos permite repetir columnas tantas veces como sea necesario. Por ejemplo, si estamos creando una cuadrícula de 12 columnas, podemos escribir lo siguiente:

 .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }

Al usar la directiva 1fr , se le indica al navegador que divida el espacio disponible entre las columnas para que cada una reciba una parte igual. Es decir, independientemente de su tamaño, la cuadrícula de este ejemplo siempre tendrá 12 columnas. Sin embargo, esto no es lo suficientemente bueno porque el contenido estará demasiado comprimido en ventanas de visualización más pequeñas.

Por lo tanto, debemos especificar un ancho mínimo para las columnas, asegurándonos de que no se estrechen demasiado. Podemos hacerlo usando la función minmax() .

 grid-template-columns: repeat(12, minmax(300px, 1fr));

Pero debido a la forma en que funciona CSS Grid, la fila se desbordará. Estamos instruyendo explícitamente al navegador para que repita las columnas 12 veces por fila, por lo que incluso si el ancho de la ventana gráfica es demasiado pequeño para ajustarse a todos con el nuevo requisito de ancho mínimo, la columna no se ajustará a nuevas filas.

Para lograr el ajuste, podemos usar las palabras clave auto-fit o auto-fill .

 grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

Al usar estas palabras clave, le indicamos al navegador que se encargue del ajuste de elementos y el tamaño de las columnas por nosotros, lo que hace que los elementos que de otro modo se desbordarían se envuelvan en filas.

Así es como se ve la grilla ahora:

Pero este no es el diseño de mampostería. Entonces, ¿cómo lograrlo? Vamos a ver.

La propiedad grid-column y grid-row

Las propiedades grid-column y grid-row especifican el tamaño y la ubicación del elemento de cuadrícula dentro de un diseño de cuadrícula. Por lo tanto, podemos especificar el ancho o la altura de un solo elemento de cuadrícula dentro de la cuadrícula. Y para hacer eso, podemos usar la palabra clave span .

Para aumentar el ancho del primer elemento de la cuadrícula, podemos escribir:

 .grid-item: nth-child(1) { grid-column: span 2; grid-row: span 1; }

Por lo tanto, la primera celda de la cuadrícula abarcará dos columnas y tendrá el siguiente aspecto:

De manera similar, si queremos aumentar la altura del segundo elemento de la cuadrícula, podemos escribir:

 .grid-item: nth-child(2) { grid-column: span 1; grid-row: span 2; }

Por lo tanto, la segunda celda de la cuadrícula abarcará dos filas y tendrá la siguiente apariencia:

De manera similar, si expandimos cada elemento de la grilla de la manera deseada, obtendremos lo siguiente:

Sin embargo, si el número de elementos de la cuadrícula es excesivo, no será posible especificar una altura y un ancho precisos para cada elemento de la cuadrícula. Entonces, en su lugar, podemos asignar los valores dinámicamente:

 .grid-item: nth-child(7n+1) { grid-column: span 2; grid-row: span 1; } .grid-item: nth-child(7n+2) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+4) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+5) { grid-column: span 3; grid-row: span 1; }

Y aquí está la salida:

¿Pero es esto suficiente? Llevémoslo al siguiente nivel agregando algo de perspectiva.

Podemos lograr esto agregando perspectiva() y usando la propiedad transform():

 .active { transform: perspective(18cm) rotate(20deg); transform-style: preserve-3d; transform-origin: left; }

Además, tenemos una barra de menú que, cuando se selecciona, cambia la cuadrícula de una cuadrícula regular a una con perspectiva. Podemos usar JavaScript para eso:

 menu.onclick=()=>{ grid.classList.toggle('active'); }

Y la salida final es:

¿Te ha gustado este artículo? ¡Déjame saber abajo en los comentarios!

¿Quiere saber cuál es la solución de JavaScript más versátil para la visualización de datos? Lea aquí: https://techvariable.com/blogs/the-most-versatile-js-solution-to-data-visualization-d3-js/