Share
Una cosa que hemos mencionado, pero que aún no hemos cubierto adecuadamente en esta serie es áreas de cuadrícula. Hasta ahora, cada uno de nuestros elementos de cuadrícula ha estado contenido dentro de una sola celda de cuadrícula, pero podemos lograr diseños más útiles al romper esos límites. Vamos a ver!
Aquí está la cuadrícula en la que hemos estado trabajando: nueve elementos de cuadrícula colocados automáticamente dentro de tres columnas iguales, tres filas iguales, divididas por canales de 20px.
Actualmente, nuestros artículos solo tienen estilos de color, pero volvamos a lo que aprendimos en el primer tutorial y agreguemos algunos columna de cuadrícula y fila de rejilla Reglas, esta vez con algo extra:
.item-1 background: # b03532; cuadrícula-columna: 1/3; fila de la cuadrícula: 1;
En esta taquigrafia columna de cuadrícula declaración que estamos usando efectivamente inicio-columna-grilla y fin de columna de rejilla, indicando al elemento que comience en la línea de cuadrícula 1 y finalice en la línea de cuadrícula 3.
Líneas de cuadrícula 1 y 3.Esto es lo que nos da; el primer elemento ahora se extiende a través de dos celdas, empujando los otros elementos hacia la derecha y hacia abajo de acuerdo con el algoritmo de colocación automática de Grid.
Lo mismo se puede hacer con filas, lo que nos daría un área mucho más grande en la parte superior izquierda de nuestra cuadrícula.
.item-1 background: # b03532; cuadrícula-columna: 1/3; fila de la cuadrícula: 1/3;
Usando lo que es quizás una sintaxis más fácil podemos cambiar fin de columna de rejilla Para el lapso palabra clave. Con lapso no estamos atados a especificar dónde termina el área, en lugar de definir cuántas pistas debe extenderse el elemento:
.item-1 background: # b03532; cuadrícula-columna: 1 / tramo 2; fila de la cuadrícula: 1 / span 2;
Esto nos da el mismo resultado final, pero si tuviéramos que cambiar dónde queremos que comience el artículo, ya no estaremos obligados a cambiar el final..
En la siguiente demostración, puede ver que hemos vaciado el diseño eliminando cuatro de los elementos. Hemos declarado posicionamiento en dos de nuestros artículos: el primero abarca dos columnas y dos filas, mientras que el cuarto comienza en la columna 3, fila 2, y se extiende hacia abajo en dos pistas:
Los elementos restantes llenan el espacio disponible automáticamente. Esto resalta perfectamente cómo un diseño de cuadrícula no tiene que reflejar el orden de origen de los elementos.
Nota: hay muchas situaciones donde el orden de la fuente es absolutamente debería Refleja la presentación, no te olvides de la accesibilidad..
El uso de los métodos de numeración que hemos descrito hasta ahora funciona bien, pero las Áreas de plantillas de cuadrícula pueden hacer que la definición de diseños sea aún más intuitiva.
Específicamente, nos permiten nombrar áreas en la cuadrícula. Con esas áreas nombradas, podemos hacer referencia a ellas (en lugar de números de línea) para colocar nuestros artículos. Mantengámonos en nuestra demostración actual por el momento y utilicemosla para hacer un diseño de página aproximado que incluya:
Definimos estas áreas en nuestro contenedor de cuadrícula, casi como si las estuviéramos dibujando:
.grid-1 / *… estilos existentes * / grid-template-areas: "header header header" "barra lateral principal" "footer footer footer";
Ahora volvemos nuestra atención a los artículos, abandonando el columna de cuadrícula y fila de rejilla reglas a favor de área de cuadrícula:
.item-1 background: # b03532; area de cuadrícula: encabezado; .item-2 background: # 33a8a5; área de cuadrícula: principal; .item-3 background: # 30997a; área de cuadrícula: barra lateral; .item-4 background: # 6a478f; área de cuadrícula: pie de página;
Nuestro primer elemento se inserta en el encabezado, abarcando las tres columnas del encabezado. A nuestro segundo elemento se le asigna el área de contenido principal, el tercero se convierte en nuestra barra lateral y el cuarto a nuestro pie de página. Y estos no necesitan seguir el orden de la fuente tampoco-.item-4 Se podría colocar fácilmente en el área de cabecera..
Como puede ver, esto hace que diseñar una página sea mucho más fácil. De hecho, si bien estamos de humor para representar visualmente nuestras cuadrículas, ¿por qué no ir más allá y usar emojis??!
Una página web dada contendrá todo tipo de componentes anidados, así que veamos cómo funciona eso con Grid.
Cuando declaramos un contenedor de rejilla. pantalla: rejilla; solo sus descendientes directos se convierten elementos de cuadrícula. El contenido que agregamos a esos elementos secundarios no se verá afectado por Grid a menos que expresemos lo contrario..
En nuestro ejemplo, vamos a añadir .item-5 , .item-6, y .item-7 De vuelta en el marcado, anidándolos en .item-2.
Así que ahora tenemos que declarar nuestra .item-2 También un contenedor de cuadrícula, configurando su cuadrícula con dos columnas y dos filas..
pantalla: rejilla; rejilla-plantilla-columnas: 1fr 30%; rejilla-plantilla-filas: auto auto; rejilla: 20px; grid-template-areas: "header header" "barra lateral del artículo";
Podemos usar los nombres "encabezado", "artículo" y "barra lateral" de nuevo aquí; No hay confusión, porque todo queda en contexto. Estas áreas de cuadrícula solo se aplican a la cuadrícula dentro de .item-2.
Para resumir de lo que hemos estado hablando:
Accentsconagua
columna de cuadrícula Nos ofrece una forma abreviada de definir dónde comienza y termina un elemento..lapso palabra clave para hacer nuestras reglas más flexibles.cuadrícula-plantillas-áreas danos el poder de nombrar nuestras áreas de cuadrícula (incluso usando emojis si el estado de ánimo nos lleva).pantalla: rejilla; y siguiendo el mismo proceso.Una vez más, hemos aprendido algunos aspectos útiles de la especificación de diseño de cuadrícula de CSS, ¡y estamos cada vez más cerca de los casos de uso del mundo real! En el siguiente tutorial veremos algunos diseños más complejos y veremos cómo el diseño receptivo se ajusta a la ecuación.
