Uso de áreas con nombre de cuadrícula para visualizar (y hacer referencia) a su diseño

Cada vez que construimos diseños simples o complejos usando CSS Grid, generalmente colocamos elementos con números de línea. Los diseños de cuadrícula contienen líneas de cuadrícula que se indexan automáticamente con números de línea positivos y negativos (es decir, a menos que nombrarlos explícitamente). Posicionar elementos con números de línea es una buena manera de diseñar las cosas, aunque CSS Grid tiene numerosas formas de lograr lo mismo con un estorbo cognitivo de tamaño insuficiente. Una de esas formas es algo que me gusta considerar como el método "ASCII".

El método ASCII en pocas palabras

El método se reduce a usar grid-template-areas para colocar los elementos de la cuadrícula utilizando áreas con nombres personalizados en el nivel del contenedor de la cuadrícula en lugar de números de línea.

Cuando declaramos un elemento como un contenedor de cuadrícula usando display: grid, el contenedor de la cuadrícula, de forma predeterminada, genera una pista de una sola columna y filas que contienen suficientemente los elementos de la cuadrícula. Los elementos secundarios del contenedor que participan en el diseño de cuadrícula se convierten en elementos de cuadrícula, independientemente de su display propiedad.

Por ejemplo, vamos a crear una grilla definiendo columnas y filas explícitamente usando el grid-template-columns y grid-template-rows propiedades.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 200px);
}

Este pequeño fragmento de CSS crea una cuadrícula de 3 × 2 donde los elementos de la cuadrícula ocupan el mismo espacio en las columnas, y donde la cuadrícula contiene tres filas con un tamaño de pista de 200px.

Podemos definir todo el diseño con áreas de cuadrícula nombradas usando el grid-template-areas propiedad. De acuerdo a la especificación, el valor inicial de grid-template-areas is none.

grid-template-areas = none | <string>+

<string>+ está enumerando el grupo de cadenas entre comillas. Cada cadena se representa como una celda y cada cadena entre comillas se representa como una fila. Como esto:

grid-template-areas: "head head" "nav main" "foot foot";

El valor de grid-template-areas describe el diseño con cuatro áreas de cuadrícula. Están,

• head
• nav
• main
• foot

head y foot abarcan dos pistas de columna y una pista de fila. El restante nav y main cada uno abarca una pista de columna y una pista de fila. El valor de grid-template-areas es muy parecido a ordenar caracteres ASCII, y como Chris sugirió Hace un tiempo, podemos obtener una visualización de la estructura general del diseño desde el propio CSS, que es la forma más sencilla de entenderlo.

Bien, creamos nuestro diseño con cuatro áreas de cuadrícula con nombre: head, nav, main, foot.

Ahora, comencemos a colocar los elementos de la cuadrícula en áreas de cuadrícula nombradas en lugar de números de línea. Específicamente, coloquemos un header elemento en el área de cuadrícula nombrada head y especifique el área de cuadrícula nombrada head existentes header elemento usando el grid-area propiedad.

Las áreas de cuadrícula con nombre en un diseño de cuadrícula se denominan identificadores. Entonces, lo que acabamos de hacer fue crear una identificación personalizada llamada head que podemos usar para colocar elementos en ciertas pistas de cuadrícula.

header { grid-area: head; }

Podemos otros elementos HTML usando otros identificadores personalizados:

nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: foot; }

Escribir valores de área con nombre

Según la Módulo de diseño de cuadrícula CSS Nivel 1, todas las cadenas deben definirse bajo los siguientes tokens:

• Token de celda con nombre: Esto representa el área de cuadrícula nombrada en la cuadrícula. Por ejemplo, head es un token de celda con nombre.
• Token de celda nula: Esto representa el área de cuadrícula sin nombre en el contenedor de cuadrícula. Por ejemplo, una celda vacía en la cuadrícula es un token de celda nula.
• token de basura: Este es un error de sintaxis, como una declaración no válida. Por ejemplo, una cantidad dispar de celdas y filas en comparación con la cantidad de elementos de la cuadrícula invalidaría una declaración.

In grid-template-area, cada cadena entre comillas (las filas) debe tener el mismo número de celdas y definir la cuadrícula completa sin ignorar ninguna celda.

Podemos ignorar una celda o dejarla como celda vacía utilizando el carácter de punto final (.)

.grid { 
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot .";
}

Si le parece visualmente incómodo o desequilibrado, podemos usar varios caracteres de punto final sin espacios en blanco que los separen:

.grid {
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "foot ....";
}

Un token de celda con nombre puede abarcar varias celdas de cuadrícula, pero esas celdas deben formar un diseño rectangular. En otras palabras, no podemos crear diseños en forma de "L" o "T", aunque la especificación sí lo hace. insinuar apoyo para diseños no rectangulares con regiones desconectadas en el futuro.

ASCII es mejor que la ubicación basada en líneas

La colocación basada en líneas es donde usamos el grid-column y grid-row properties para colocar un elemento en la cuadrícula utilizando números de línea de cuadrícula que se indexan automáticamente por un número:

.grid-item {
  grid-column: 1 / 3; /* start at grid column line 1 and span to line 3 */
}

Pero los números de línea de los elementos de la cuadrícula pueden cambiar si nuestro diseño cambia en un punto de interrupción. En esos casos, no es como si pudiéramos confiar en los mismos números de línea que usamos en un punto de interrupción específico. Aquí es donde se necesita una carga cognitiva adicional para comprender el código.

Por eso creo que un enfoque basado en ASCII funciona mejor. Podemos redefinir el diseño para cada punto de interrupción usando grid-template-areas dentro del contenedor de cuadrícula, que ofrece una visualización conveniente de cómo se verá el diseño directamente en el CSS: ¡es como un código autodocumentado!

.grid {
  grid-template-areas:
    "head head"
    "nav main"
    "foot ...."; /* much easier way to see the grid! */
}

.grid-item {
  grid-area: foot; /* much easier to place the item! */
}

De hecho, podemos ver los números de línea y las áreas de cuadrícula de una cuadrícula en DevTools. En Firefox, por ejemplo, vaya al panel Diseño. Entonces, bajo el Cuadrícula pestaña, ubique el "Configuración de visualización de cuadrícula" Y habilitar la “Mostrar número de línea” y "Mostrar nombres de áreas" .

Este enfoque ASCII que utiliza áreas con nombre requiere mucho menos esfuerzo para visualizar y encontrar fácilmente la ubicación de los elementos.

Veamos el caso de uso "universal"

Cada vez que veo un tutorial sobre áreas de cuadrícula con nombre, el ejemplo común es generalmente un patrón de diseño que contiene header, main, sidebary footer áreas Me gusta pensar en esto como el caso de uso "universal", ya que arroja una red muy amplia.

Es un gran ejemplo para ilustrar cómo grid-template-areas funciona, pero una implementación de la vida real generalmente implica consultas de medios configuradas para cambiar el diseño en ciertos anchos de ventana gráfica. En lugar de tener que volver a declarar grid-area en cada elemento de la cuadrícula en cada punto de interrupción para reposicionar todo, podemos usar grid-template-areas para "responder" al punto de interrupción en su lugar, ¡y obtener una buena imagen del diseño en cada punto de interrupción en el proceso!

Antes de definir el diseño, asignemos un ident a cada elemento usando el grid-area propiedad como estilo base.

header {
  grid-area: head;
}

.left-side {
  grid-area: left;
}

main {
  grid-area: main;
}

.right-side {
  grid-area: right;
}

footer {
  grid-area: foot;
}

Ahora, definamos el diseño nuevamente como un estilo base. Vamos con un enfoque móvil primero para que las cosas se apilen de forma predeterminada:

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
}

Cada elemento de la cuadrícula es tamaño automático en esta configuración, que parece un poco rara, para que podamos establecer min-height: 100vh en el contenedor de cuadrícula para darnos más espacio para trabajar con:

.grid-container {
  display: grid;
  grid-template-areas:
    "head"
    "left"
    "main"
    "right"
    "foot";
  min-height: 100vh;
}

Ahora digamos que queremos el main elemento para sentarse a la derecha del apilado left y right barras laterales cuando lleguemos a un ancho de ventana de visualización ligeramente más amplio. volvemos a declarar grid-template-areas con un diseño ASCII actualizado para obtener eso:

@media (min-width: 800px) {
  .parent {
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 100px 1fr 1fr 100px;
    grid-template-areas:
      "head head"
      "left main"
      "right main"
      "foot foot";
  }
}

Lancé un poco de tamaño de columna y fila allí puramente por estética.

A medida que el navegador se vuelve aún más amplio, es posible que deseemos cambiar el diseño nuevamente, de modo que main está intercalado entre el left y right barras laterales ¡Escribamos el diseño visualmente!

.grid-container {
  grid-template-columns: 200px 1fr 200px; /* again, just for sizing */
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

Aprovechar los nombres de línea implícitos para la flexibilidad

Según la especificación, grid-template-areas genera automáticamente nombres para las líneas de cuadrícula creadas por áreas de cuadrícula con nombre. Llamamos a estas líneas de cuadrícula nombradas implícitamente porque se nombran para nosotros de forma gratuita sin ningún trabajo adicional.

Cada área de cuadrícula con nombre obtiene cuatro líneas de cuadrícula con nombre implícito, dos en la dirección de la columna y dos en la dirección de la fila, donde -start y -end se adjuntan a la ident. Por ejemplo, un área de cuadrícula denominada head se head-start y head-end líneas en ambas direcciones para un total de cuatro líneas de cuadrícula con nombres implícitos.

¡Podemos usar estas líneas a nuestro favor! Por ejemplo, si queremos que un elemento se superponga al main, lefty right áreas de nuestra grilla. Anteriormente, hablamos sobre cómo los diseños deben ser rectangulares, no se permiten diseños en forma de "T" y "L". En consecuencia, no podemos usar el método de diseño visual ASCII para colocar la superposición. Sin embargo, podemos usar nuestros nombres de línea implícitos usando el mismo grid-area propiedad en la superposición que usamos para colocar los otros elementos.

Sabía usted que grid-area es una propiedad abreviada, más o menos de la misma manera que margin y padding Cuáles son las propiedades abreviadas? Toma múltiples valores de la misma manera, pero en lugar de seguir una dirección "en el sentido de las agujas del reloj" como, margin - que va en orden de margin-block-start, margin-inline-end, margin-block-endy margin-inline-start - grid-area va así:

grid-area: block-start / inline-start / block-end / inline-end;

Pero estamos hablando de filas y columnas, no de bloques y direcciones en línea, ¿verdad? Bueno, se corresponden entre sí. El eje de la fila corresponde a la dirección del bloque y el eje de la columna corresponde a la dirección en línea:

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

Volvamos a colocar ese elemento superpuesto como un elemento de cuadrícula en nuestro diseño. los grid-area La propiedad será útil para colocar el elemento usando nuestras líneas de cuadrícula con nombre implícito:

.overlay {
  grid-area: left-start / left-start / right-end / main-end;
}

Creación de un sistema de rejilla mínima

Cuando nos enfocamos en diseños como el caso de uso "universal" que acabamos de ver, es tentador pensar en áreas de cuadrícula en términos de un área por elemento. Pero no tiene que funcionar así. Podemos repetir identificadores para reservarles más espacio en el diseño. Vimos que cuando repetimos el head y foot idents en el último ejemplo:

.grid-container {
  grid-template-areas:
    "head head head"
    "left main right"
    "left main right"
    "foot foot foot";
}

Darse cuenta de main, lefty right también se repiten pero en la dirección del bloque.

Olvidémonos de los diseños de página completa y usemos áreas de cuadrícula con nombre en un componente. ¡La cuadrícula es tan buena para los diseños de componentes como para las páginas completas!

Aquí hay un componente de héroe bastante estándar que luce una fila de imágenes seguidas de diferentes bloques de texto:

El HTML es bastante simple:

<div class="hero">
  <div class="image">
    <img src="..." alt="" />
  </div>
  <div class="text">
    <!-- ... -->
  </div>
</div>

Podríamos hacer esto para un diseño apilado realmente rápido:

.hero {
  grid-template-areas:
    "image"
    "text";
}

Pero entonces tenemos que alcanzar algunos padding, max-width o lo que sea para que el área de texto sea más estrecha que la fila de imágenes. ¿Qué tal si expandimos nuestro diseño ASCII en una cuadrícula de cuatro columnas repitiendo nuestros identificadores en ambas filas?

.hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* maintain equal sizing */
  grid-template-areas:
    "image image image image"
    "text  text  text  text";
}

Muy bien, ahora podemos colocar nuestros elementos de cuadrícula en esas áreas con nombre:

.hero .image {
  grid-area: image;
}

.hero .text {
  grid-area: text;
}

Hasta ahora, todo bien: ambas filas ocupan todo el ancho. Podemos usar eso como nuestro diseño base para pantallas pequeñas.

Pero tal vez queramos introducir el texto más angosto cuando la ventana gráfica alcance un ancho mayor. Podemos usar lo que sabemos sobre el carácter de punto final para "saltar" columnas. tengamos el text ident omita la primera y la última columna en este caso.

@media (min-width: 800px) {
  main {
    grid-template-columns: repeat(6, 1fr); /* increase to six columns */
    grid-template-areas:
      "image image image image image image"
      "..... text  text  text  text  .....";
  }
}

Ahora tenemos el espaciado que queremos:

Si el diseño necesita ajustes adicionales en puntos de interrupción aún más grandes, podemos agregar más columnas y continuar desde allí:

.hero {
  grid-template-columns: repeat(8, 1fr);
  grid-template-areas:
    "image image image image image image image image"
    "..... text  text  text  text  text  text  .....";
}

Visualización de herramientas de desarrollo:

¿Recuerdas cuando los diseños de 12 y 16 columnas eran lo más importante en los marcos CSS? Podemos escalar rápidamente a eso y mantener un buen diseño visual ASCII en el código:

main {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "image image image image image image image image image image image image"
    "..... text  text  text  text  text  text  text  text  text  text  .....";
}

Veamos algo más complejo.

Hemos visto un ejemplo bastante genérico y un ejemplo relativamente sencillo. Todavía podemos obtener buenas visualizaciones de diseño ASCII con diseños más complejos.

Trabajemos hasta esto:

He dividido esto en dos elementos en el HTML, un header y main:

<header>
  <div class="logo"> ... </div>
  <div class="menu"> ... </div>
</header>
<main>
  <div class="image"> ... </div>
  <h2> ... </h2>
  <div class="image"> ... </div>
  <div class="image"> ... </div>
</main>

Creo que flexbox es más apropiado para el header ya que podemos espaciar sus elementos secundarios fácilmente de esa manera. Entonces, no grid ahí:

header {
  display: flex;
  justify-content: space-between;
  /* etc. */
}

Pero grid es muy adecuado para el main disposición del elemento. Definamos el diseño y asignemos los idents a los elementos correspondientes que necesitamos para posicionar el .text y tres .image elementos. Comenzaremos con esto como nuestra línea de base para pantallas pequeñas:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "image1 image1 .....  image2"
    "texts  texts  texts  texts"
    ".....  image3 image3 .....";
}

Ya puedes ver a dónde vamos con esto, ¿verdad? El diseño se visualiza para nosotros y podemos colocar los elementos de la cuadrícula en su lugar con los identificadores personalizados:

.image:nth-child(1) {
  grid-area: image1;
}

.image:nth-last-child(2) {
  grid-area: image2;
}

.image:nth-last-child(1) {
  grid-area: image3;
}

h2 {
  grid-area: texts;
}

Ese es nuestro diseño base, así que aventurémonos en un punto de interrupción más amplio:

@media (min-width: 800px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      ". image1 image1 ...... ......  ...... image2 ."
      ". texts  texts  texts  texts   texts  image2 ."
      ". .....  image3 image3 image3  image3 ...... .";
  }
}

¡Apuesto a que sabe exactamente cómo se verá porque el diseño está justo ahí en el código!

Mismo trato si decidimos escalar aún más:

.grid {
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    ". image1 image1 .....  .....   .....  .....  .....  .....  .....  .....  ."
    ". texts  texts  texts  texts   texts  texts  texts  texts  texts  image2 ."
    ". .....  image3 image3 image3  image3 .....  .....  .....  .....  .....  .";
}

Aquí está la demostración completa:

Estoy usando el "negativo margin hack” para que la primera imagen se superponga al encabezado.

Terminando

Tengo curiosidad si alguien más está usando grid-template-areas para crear áreas con nombre para el beneficio de tener una visualización ASCII del diseño de la cuadrícula. Tener eso como referencia en mi código CSS ha ayudado a desmitificar algunos diseños complejos que pueden haber sido aún más complejos cuando se trata de números de línea.

Pero si nada más, definir diseños de cuadrícula de esta manera nos enseña algunas cosas interesantes sobre CSS Grid que vimos a lo largo de esta publicación:

• La grid-template-areas La propiedad nos permite crear identificaciones personalizadas, o "áreas con nombre", y usarlas para colocar elementos de cuadrícula usando el grid-area propiedad.
• Hay tres tipos de "tokens" que grid-template-areas acepta como valores, incluidos tokens de celda con nombre, tokens de celda nula y tokens de celda basura.
• Cada fila que se define en grid-template-areas necesita el mismo número de células. Ignorar una sola celda no crea un diseño; se considera un token basura.
• Podemos obtener un diagrama similar a ASCII visual del diseño de la cuadrícula en el grid-template-areas valor de propiedad mediante el uso de espacios en blanco requeridos entre tokens de celda con nombre al definir el diseño de la cuadrícula.
• Asegúrese de que no haya espacios en blanco dentro de un token de celda nula (p. ej. .....). De lo contrario, un solo espacio en blanco entre tokens de celda nula crea celdas vacías innecesarias, lo que da como resultado un diseño no válido.
• Podemos redefinir el diseño en varios puntos de interrupción reposicionando los elementos de la cuadrícula usando grid-area, luego volver a declarar el diseño con grid-template-areas en el contenedor de cuadrícula para actualizar la lista de pistas, si es necesario. No hay necesidad de tocar los elementos de la cuadrícula.
• Las áreas de cuadrícula con nombre personalizado obtienen automáticamente cuatro nombres de línea asignados implícitamente: <custom-ident>-start y <custom-ident>-end tanto en la dirección de la columna como de la fila.