Share
En tutoriales anteriores hemos aprendido cómo configurar una cuadrícula, definiendo sus propiedades explícitas (como rejilla-plantilla-columnas y cuadrícula-plantillas-áreas) e incluso algunas de sus propiedades implícitas (como rejilla-auto-columnas). En este tutorial vamos a ver la propiedad de taquigrafía. cuadrícula que trata rápidamente con todo lo anterior en una sola declaración.
Como de costumbre, comienza por declarar pantalla: rejilla; en su contenedor. A continuación, utilice el cuadrícula Propiedad para disponer sus filas, luego sus columnas:
.grid-1 display: grid; cuadrícula: 100px auto 300px / repetición (2, 1fr) 100px;
La declaración anterior dice que queremos tres filas explícitas de 100px, auto y 300px. Y (usando el repetir() función) dos columnas de 1fr, luego una de 100px. Es exactamente lo mismo que esta versión más larga:
.grid-1 display: grid; cuadrícula-plantilla-filas: 100px auto 300px; cuadrícula-plantilla-columnas: repetir (2, 1fr) 100px;
Ambas declaraciones nos dan esto:
Los valores implícitos son lo que pedimos a Grid que use más allá de los valores explícitos que definimos. En el cuadrícula taquigrafía no podemos combinar los dos, así que tenemos que tomar una decisión. Echa un vistazo a esto, por ejemplo:
.grid-1 display: grid; cuadrícula: auto-flow 100px / 1fr 100px;
En este caso nos hemos quedado con columnas explícitas (una de 1fr, otra de 100px) pero nuestras filas utilizan una forma abreviada de flujo de rejilla automático y filas-auto-filas. Dice “Cuando necesite agregar más pistas a la cuadrícula, agréguelas como filas. Y hacer que cada uno de 100px de altura ". Es lo mismo que esto:
.grid-1 display: grid; rejilla-plantilla-columnas: 1fr 100px; grid-auto-flow: fila; filas-auto-filas: 100px;
Este es un comportamiento bastante predeterminado, pero vemos un cambio mayor si en cambio pedimos a nuestra cuadrícula implícita que use columnas adicionales:
.grid-1 display: grid; cuadrícula: 100px 300px / auto-flow 100px;
Esto nos da dos filas de 100px y 300px, luego establece efectivamente grid-auto-flow: columna;. Es lo mismo que
.grid-1 display: grid; rejilla-plantilla-filas: 100px 300px; grid-auto-flow: columna; rejilla-auto-columnas: 100px;
Ahora, el algoritmo de colocación automática coloca los elementos de arriba a abajo, agregando columnas a la derecha cuando se queda sin espacio:
Nota: no podemos declarar flujo automático en ambas filas y columnas, eso no funcionará.
Si recuerdas nuestro tutorial Comprender el "algoritmo de colocación automática" de la cuadrícula de CSS, recordarás lo discutimos escaso y denso; Palabras clave que describen la forma en que los elementos se empaquetan en una cuadrícula. Estos también se pueden utilizar junto con flujo automático, Me gusta esto:
.grid-1 display: grid; cuadrícula: 100px 300px / auto-flow denso 100px;
Las áreas de plantillas son una forma de nombrar áreas de nuestra cuadrícula, en lo que es casi una forma visualmente representativa. En su forma más simple, solo usaríamos cuadrícula Para describir nuestras áreas de plantilla y nada más:
.grid-1 display: grid; cuadrícula: "encabezado encabezado encabezado" "barra lateral principal" "pie de página pie de página";
Luego, indicaríamos qué área se llena cada elemento de la cuadrícula, como esto:
.item-1 grid-area: header;
Si recuerda nuestro tutorial original de áreas de plantilla, teníamos algunos detalles más para darnos las dimensiones de columna y fila:
.grid-1 display: grid; cuadrícula-plantilla-columnas: repetir (3, 1fr); rejilla-plantilla-filas: 80px 180px 80px; grid-template-areas: "encabezado encabezado encabezado" "barra lateral principal" "pie de página pie de página";
Podemos hacer eso también, de la siguiente manera:
.grid-1 display: grid; cuadrícula: "encabezado encabezado encabezado" 80px "barra lateral principal" 180px "pie de página pie de página" 80px / 1fr 1fr 1fr;
Añadimos los anchos de columna después de la barra diagonal (la repetir() La función no funcionará en este caso, pero no sé por qué). Y agregamos las alturas de fila en línea después de las declaraciones de área. Esto es lo que terminamos con:
Este tutorial debería haberle dado una comprensión de cómo cuadrícula Trabajos de taquigrafía. Juegue con él, vea qué otros aspectos del módulo CSS Grid puede usar con él y háganos saber cuánto tiempo le ahorra.!
Accentsconagua