¿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   y usar la función   . Entonces empecemos. grid-template-columns repeat()       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   nos permite repetir columnas tantas veces como sea necesario. Por ejemplo, si estamos creando una cuadrícula de 12 columnas, podemos escribir lo siguiente: repeat()   .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }  Al usar la directiva   , 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. 1fr  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   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. CSS  Para lograr el ajuste, podemos usar las palabras clave   o   . auto-fit 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.    propiedad   y  La grid-column grid-row  Las propiedades   y   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   . grid-column grid-row 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:    ¡Déjame saber abajo en los comentarios! ¿Te ha gustado este artículo?     ¿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/

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps