Comprender la cuadrícula CSS: áreas de plantilla de cuadrícula

Al usar el diseño de cuadrícula CSS, siempre puede colocar elementos de una línea de cuadrícula a otra. Sin embargo, existe una forma alternativa de describir su diseño, una que es de naturaleza visual. En este artículo, aprenderemos cómo usar la propiedad grid-template-areas para definir la ubicación en la cuadrícula y descubrir cómo funciona realmente la propiedad.

En caso de que te hayas perdido los artículos anteriores de esta serie, puedes encontrarlos aquí:

• Parte 1: Creación de un contenedor de cuadrícula
• Parte 2: Líneas de cuadrícula
• Parte 3: Áreas de plantilla de cuadrícula

Describiendo el diseño con grid-template-areas

La propiedad grid-template-areas acepta una o más cadenas como valor. Cada cadena (entre comillas) representa una fila de su cuadrícula. Puede usar la propiedad en una cuadrícula que haya definido usando grid-template-rows y grid-template-columns , o puede crear su diseño, en cuyo caso todas las filas tendrán un tamaño automático.

La propiedad y el valor siguientes describen una cuadrícula con cuatro áreas, cada una de las cuales abarca dos pistas de columna y dos pistas de fila. Se hace que un área abarque varias pistas repitiendo el nombre en todas las celdas que le gustaría que cubriera:

 grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four";

Los elementos se colocan en el diseño al ser nombrados con un identificador usando la propiedad grid-area . Por lo tanto, si quiero colocar un elemento con una clase de test en el área de la cuadrícula denominada one , uso el siguiente CSS:

 .test { grid-area: one; }

Puede ver esto en acción en el ejemplo de CodePen que se muestra a continuación. Tengo cuatro elementos (con clases uno a cuatro); estos se asignan al área de cuadrícula correspondiente utilizando la propiedad grid-area y, por lo tanto, se muestran en la cuadrícula en los cuadros correctos.

Si usa Firefox Grid Inspector, puede ver los nombres de las áreas y las líneas de la cuadrícula que demuestran que cada elemento abarca dos filas y dos columnas, todo sin hacer ningún posicionamiento basado en líneas en el elemento en sí.

Reglas para usar grid-template-areas

Hay algunas reglas al crear un diseño de esta manera. Romper las reglas hará que el valor no sea válido y, por lo tanto, su diseño no se realizará. La primera regla es que debe describir una cuadrícula completa , es decir, cada celda de su cuadrícula debe estar llena.

Si desea dejar una celda (o celdas) como espacio vacío, puede hacerlo insertando un archivo . o series como ... sin espacio entre ellas.

Por lo tanto, si cambio el valor de grid-template-areas de la siguiente manera:

 grid-template-areas: "one one two two" "one one two two" ". . four four" "three three four four";

Ahora tengo dos celdas sin contenido. El elemento tres solo se muestra en la última fila de la cuadrícula.

Solo puede definir cada área una vez , lo que significa que no puede usar esta propiedad para copiar contenido en dos lugares de la cuadrícula. Por lo tanto, el siguiente valor no sería válido y haría que se ignorara toda la propiedad, ya que hemos duplicado el área three :

 grid-template-areas: "one one three three" "one one two two" "three three four four" "three three four four";

No puede crear un área no rectangular, por lo que la propiedad no se puede usar para crear un área en forma de 'L' o 'T', lo que hace que el siguiente valor también sea inválido:

 grid-template-areas: "one one two two" "one one one one" "three three four four" "three three four four";

Formateo de las cadenas

Me gusta mostrar el valor de grid-template-areas como lo hice arriba (con cada cadena representando una fila debajo de la fila anterior). Esto me da una representación visual de lo que será el diseño.

Para ayudar con esto, es valioso agregar caracteres de espacio en blanco adicionales entre cada celda y también usar varios archivos . caracteres que indican celdas vacías.

En el valor a continuación, he usado múltiples espacios en blanco entre palabras más pequeñas y también múltiples . caracteres para que las celdas vacías se alineen:

 grid-template-areas: "one one two two" "one one two two" "..... ..... four four" "three three four four";

Dicho esto, también es completamente válido tener todas las cadenas en una sola línea, por lo que podríamos escribir nuestro ejemplo de la siguiente manera:

 grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four";

Explicando grid-template-areas y grid-area

La razón por la que cada área debe ser un rectángulo completo es que debe tener la misma forma que podría crear utilizando la ubicación basada en líneas. Si seguimos con nuestro ejemplo anterior, podríamos hacer este diseño con líneas de cuadrícula como en el siguiente CodePen. Aquí he creado mi grilla como antes. Esta vez, sin embargo, usé líneas de cuadrícula para crear el posicionamiento usando las propiedades grid-column-start , grid-column-end , grid-row-start y grid-row-end .

Nota : si leyó mi artículo anterior "Comprender la cuadrícula CSS: líneas de cuadrícula", sabrá que es posible usar grid-area como abreviatura para declarar las cuatro líneas a la vez.

Esto significa que también podríamos crear nuestro diseño con el siguiente orden de líneas:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

 .one { grid-area: 1 / 1 / 3 / 3; } .two { grid-area: 1 / 3 / 3 / 5; } .three { grid-area: 3 / 1 / 5 / 3; } .four { grid-area: 3 / 3 / 5 / 5; }

La propiedad grid-area es interesante ya que puede tomar números de línea y nombres de línea. También es importante comprender la forma diferente en que se comporta en cada modo.

Uso grid-area con números de línea

Si utiliza la propiedad grid-area con números de línea, las líneas se asignan en el orden descrito anteriormente.

Si pierde algún valor, por lo tanto, proporciona 1, 2 o 3 números de línea, los valores faltantes se configuran en auto , lo que significa que el área abarcará 1 pista (que es el valor predeterminado). Por lo tanto, el siguiente CSS colocaría un elemento grid-row-start: 3 con todos los demás valores configurados en automático, por lo tanto, el elemento se colocaría automáticamente en la primera pista de columna disponible y abarcaría una pista de fila y una pista de columna.

 grid-area: 3;

Uso grid-area con identificadores

Si usa un identificador (que es como se llama un área con nombre en Diseño de cuadrícula), entonces la propiedad grid-area también ocupa cuatro líneas. Si tiene líneas con nombre en su cuadrícula como se describe en "Comprensión de la cuadrícula CSS: creación de un contenedor de cuadrícula", entonces puede usar estas líneas con nombre de la misma manera que las líneas numeradas.

Sin embargo, lo que sucede cuando pierde algunas líneas es diferente a cuando usa identificadores y no números.

A continuación, creé una cuadrícula con líneas nombradas y usé grid-area para colocar un elemento (faltando el valor final):

 .grid { display: grid; grid-template-columns: [one-start three-start] 1fr 1fr [one-end three-end two-start four-start] 1fr 1fr [two-end four-end]; grid-template-rows: [one-start two-start] 100px 100px [one-end two-end three-start four-start] 100px 100px [three-end four-end];; } .two { grid-area: two-start / two-start / two-end; }

Esto significa que nos falta el nombre de línea para grid-column-end . La especificación dice que en esta situación, grid-column-end debería usar una copia de grid-column-start . Si grid-column-end y grid-column-start son idénticos, entonces la línea final se descarta y, esencialmente, el valor se establece en automático, por lo que abarcamos una pista como en la versión numerada.

Lo mismo sucede si nos saltamos el tercer valor grid-row-end ; se convierte en lo mismo que grid-row-start y, por lo tanto, se convierte en auto .

Eche un vistazo al siguiente ejemplo de CodePen de cómo se usa cada grid-area y cómo esto cambia el diseño del elemento:

Esto explica por qué grid-area funciona con un identificador de valor único que representa un nombre de área.

Cuando creamos un área con nombre con la propiedad grid-template-areas , se puede hacer referencia al borde de cada área mediante un nombre de línea que es el mismo que el nombre del área que usó. En nuestro caso, podríamos tomar nuestra área denominada one y colocar nuestro elemento usando líneas nombradas de la siguiente manera:

 .one { grid-row-start: one; grid-row-end: one; grid-column-start: one; grid-row-end: one; }

Si la línea es una línea de -start , entonces one resuelve en el extremo inicial de la columna o fila. Si es una -end final, entonces one resuelve en la línea final de la columna o fila.

Esto significa que cuando decimos grid-area: one , hemos omitido los últimos tres valores para la abreviatura grid-area ; todos terminan siendo copias del primer valor; en nuestro caso, todos se convierten en one y el elemento se coloca de la misma manera que con nuestro uso manual.

La forma en que funciona la nomenclatura en el diseño de cuadrícula es inteligente y permite algunas cosas interesantes, sobre las que he escrito en mis artículos anteriores "Nombrar cosas en el diseño de cuadrícula CSS" y "Patrones de diseño editorial con cuadrícula CSS y columnas con nombre".

Elementos en capas al usar grid-template-areas

Solo un nombre puede ocupar cada celda cuando se usa grid-template-areas , sin embargo, aún puede agregar elementos adicionales a la cuadrícula después de hacer su diseño principal de esta manera. Puede utilizar los números de línea como de costumbre.

En el siguiente ejemplo de CodePen, agregué un elemento adicional y lo posicioné usando el posicionamiento basado en líneas sobre los elementos ya posicionados:

También puede usar nombres de líneas definidos al crear sus columnas o filas habituales. Aún mejor, tendrá algunos nombres de línea creados por la formación de las áreas. Ya hemos visto cómo puedes obtener cuatro nombres de línea con el nombre del área. También obtiene una línea en el borde inicial de cada área con -start agregado al nombre del área, y una línea en el borde final de cada área con -end agregado.

Por lo tanto, el área denominada one tiene líneas de borde de inicio denominadas one-start y líneas de borde final denominadas one-end .

Luego puede usar estos nombres de línea implícitos para colocar un elemento en la cuadrícula. Esto puede ser útil si está redefiniendo la cuadrícula en diferentes puntos de interrupción siempre que desee que el elemento colocado siempre vaya después de un determinado nombre de línea.

Uso de áreas de plantilla de cuadrícula en diseño receptivo

A menudo trabajo con la creación de componentes en una biblioteca de componentes y encuentro que el uso grid-template-areas puede ser útil en términos de poder ver exactamente cómo se verá un componente desde el CSS. También es muy sencillo redefinir el componente en diferentes puntos de interrupción redefiniendo el valor de grid-template-areas a veces además de cambiar el número de pistas de columna disponibles.

En el CSS a continuación, he definido un diseño de una sola columna para mi componente. Luego, con un ancho mínimo de 600 px, redefino el número de columnas y también el valor de grid-template-areas para crear un diseño con dos columnas. ¡Lo bueno de este enfoque es que cualquiera que mire este CSS puede ver cómo funciona el diseño!

 .wrapper { background-color: #fff; padding: 1em; display: grid; gap: 20px; grid-template-areas: "hd" "bd" "sd" "ft"; } @media (min-width: 600px) { .wrapper { grid-template-columns: 3fr 1fr; grid-template-areas: "hd hd" "bd sd" "ft ft"; } } header { grid-area: hd; } article {grid-area: bd; } aside { grid-area: sd; } footer { grid-area: ft; }

Accesibilidad

Al usar este método, debe tener en cuenta que es muy fácil mover las cosas y causar el problema de desconectar la visualización del orden de origen subyacente. Cualquiera que navegue por el sitio, o que esté mirando la pantalla mientras se habla del contenido, usará el orden en que están las cosas en la fuente. Al mover la pantalla de ese orden, podría crear una experiencia muy confusa y desconectada. No use este método para mover cosas sin asegurarse de que la fuente esté en un orden sensato y coincida con la experiencia visual.

Resumen

Esa es la verdad sobre el uso de las propiedades grid-template-area y grid-area para crear diseños. Si no ha utilizado este método de diseño antes, pruébelo. Considero que es una forma encantadora de experimentar con diseños y, a menudo, la uso al crear prototipos de un diseño, incluso si, por una razón u otra, finalmente usaremos un método diferente para la versión de producción.