áreas de plantilla de cuadrícula Trucos CSS - Trucos CSS

EN grid-template-areas La propiedad CSS le permite definir y nombrar las celdas (o "áreas") en un contenedor de red CSS.

.grid-container {
  display: grid;
  grid-template-areas: "header header" "sidebar main";
}

Entonces, ¿este ejemplo de arriba? Obtenemos una cuadrícula de dos en dos, donde la fila superior guarda dos columnas para un área llamada headerLa fila inferior también tiene dos columnas, pero las guarda para áreas de red denominadas sidebar y mainrespectivamente.

Esto significa que nuestra red está establecida y tenemos áreas de red definidas, pero en realidad no hay nada asignado a estas áreas de red. Si queremos colocar un elemento en un área de red, debemos declararlo explícitamente con grid-area propiedad de este elemento:

.grid-container {
  display: grid;
  grid-template-areas: "header header" "sidebar main";
}
.grid-header {
  grid-area: header;
}
.grid-sidebar {
  grid-area: sidebar;
}
.grid-content {
  grid-area: main;
}

Algo a tener en cuenta es que el área de la red debe ser una celda en el contenedor de la red o un grupo de celdas vecinas en el forma rectangularEsto significa que todos los siguientes ejemplos son válidos:

Dos ejemplos válidos y vigentes de áreas de red. — Estas partes verdes son ejemplos de áreas de patrón de cuadrícula válidas.

Pero lo que no podemos hacer es formar zonas de red no rectangulares. Así que no tiene suerte si el área que desea definir es más como una "T" o una "L".

Dos ejemplos no válidos de áreas de red de plantilla.

Sintaxis

grid-template-areas: none | <string>

Valor inicial: none
Se refiere a: contenedores de celosía
heredado: no
Valor estimado: como se especifica, la palabra clave none o una lista de valores de cadena
Tipo de animación: discreto discreto

Valores

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "col-1 col-2 col-3";
grid-template-areas: "header header header" "sidebar main main";
grid-template-areas: "header header header"
                      "sidebar main main"
                      ". footer footer";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: unset;

`none`

Está defecto Y, como habrás adivinado, none significa que no se especifican áreas de red con nombre ni rutas de red explícitas en el contenedor de red. Esto también significa que los rieles de la red se generan implícitamente y sus dimensiones están determinadas por grid-auto-columns y grid-auto-rows Propiedades.

De hecho, hay otra forma de crear rutas de red explícitas a partir del uso grid-template-areasy eso es para usar grid-template-columns y grid-template-rows propiedades. Veremos esto con más detalle más adelante en el artículo.

`<string>`

La cadena puede ser cualquier nombre que desee dar a un área específica con un patrón de cuadrícula. Por lo tanto, si tiene una fila superior en el contenedor web y desea que el encabezado de su diseño encaje allí, puede llamar al área "encabezado" o "parte superior de la página" o, literalmente, lo que desee. De hecho, si hay varias columnas en esta fila, podemos hacer que cada una tenga un nombre de red diferente.

.grid {
  grid-template-areas: "logo menu utility-nav";
}

Tenga en cuenta que la fila completa de tres columnas en este ejemplo está entre comillas. Esto es crucial porque las áreas de la plantilla web con nombres entre comillas indican una nueva línea. Entonces, si tenemos dos líneas, veremos dos grupos de áreas entre comillas:

.grid {
  grid-template-areas: "logo menu utility-nav" "sidebar-1 content sidebar-2";
}

Aún mejor, podemos hacer que esto sea un poco más fácil de entender escribiendo cada línea en una línea separada:

.grid {
  grid-template-areas:
    "logo menu utility-nav"
    "sidebar-1 content sidebar-2";
}

La sintaxis de cadenas es capaz de cosas como capturar y pasar celdas en un contenedor de red. Llegaremos a eso en un momento.

Uso básico

Primero, definamos las áreas de la plantilla de red usando grid-template-areas propiedad del contenedor de red principal:

.grid {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

A partir de ahora, el contenedor de red tiene áreas con nombre, pero nada en ellas. Para colocar elementos allí, debemos asignar el área de cuadrícula nombrada a un elemento usando grid-area propiedad del elemento colocamos:

header {
  grid-area: header;
}

aside {
  grid-area: sidebar;
}

main {
  grid-area: main;
}

footer {
 grid-area: footer;
}

Este es el resultado basado en grid-template-areas definimos en el contenedor de la red principal:

Diseño de página web creado con la propiedad CSS `grid-template-areas`

Dimensionamiento de las áreas nombradas de la red

El tamaño de las pistas de red se puede ajustar usando grid-template-columns y grid-template-rows propiedades del contenedor de red principal.

Digamos que tenemos un requisito de diseño de que nuestra red necesita dos columnas, y la segunda columna ocupa el doble de espacio que la primera columna. Podemos usar el fraccionario (fr) unidad para esto:

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "sidebar main";
}

Este es el mismo tipo de trato para las filas. Digamos ahora que necesitamos el siguiente diseño de cuadrícula de tres por tres:

Esta vez hagamos la primera y la tercera fila de la misma altura fija 250pxpero cambie el tamaño de la fila del medio para que ocupe todo el espacio que necesite el contenido:

.grid {
  display: grid;
  gap: 1rem;
  grid-template-rows: 250px auto 250px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

Si se pregunta qué diablos está pasando con todas estas áreas repetitivas con plantillas de red con nombre, eso es todo por...

Rango de celdas y filas

La repetición de un área nombrada conecta las celdas. Entonces, si el objetivo es crear un área con nombre llamada feature y para ocupar dos columnas en la fila superior, podemos hacer algo como esto:

/* Valid declaration */
grid-template-areas: "feature feature widget";

Cool y podemos hacer lo mismo en la dirección vertical si la misma área comienza cada fila:

/* Valid declaration */
grid-template-areas:
  "feature aside widget-1"
  "feature aside widget-2";

Por supuesto, podemos combinar los dos para obtener un área de patrón de cuadrícula que abarque ambas direcciones:

/* Valid declaration */
grid-template-areas:
  "feature feature widget-1"
  "feature feature widget-2";

Como se mencionó anteriormente, las áreas del patrón de cuadrícula deben ser rectangulares. Esto significa que la siguiente variación del último ejemplo no es válida:

/* Invalid declaration */
grid-template-areas:
  "feature feature widget-1"
  "feature aside widget-2";

Podemos crear brechas (o "paradas" sólidas) entre celdas

Esto es posible con la ayuda del punto (.) notación:

grid-template-areas:
  "header header header"
  "sidebar main main"
  ". footer footer"; /* first cell is empty */
}

El número de puntos no es importante. En su lugar, podríamos hacer esto:

grid-template-areas:
  "header  header header"
  "sidebar main   main"
  "....... footer footer"; /* first cell is empty */
}

Ambas declaraciones crean la misma red:

La primera columna de la tercera fila está vacía, gracias a la notación de puntos.

Los espacios en blanco son una buena manera de visualizar la web

Las siguientes declaraciones son equivalentes, pero la segunda es más fácil de visualizar la estructura de la red, ya que usamos espacios vacíos para ordenar los nombres:

grid-template-areas:
  "header header header"
  "sidebar main main"
  ". footer footer";

grid-template-areas:
  "header  header header"
  "sidebar main   main"
  ".       footer footer";

Si está buscando otra forma de visualizar un contenedor de red, Chris tiene una idea inteligente para "dibujarlo" en algo así como formato ASCII, visualizando la red en algo así como formato ASCII en sus comentarios CSS.

Las filas deben tener el mismo número de columnas.

Todas las listas deben tener el mismo número de valores, de lo contrario, la declaración no es válida.

/* 👍 */
grid-template-areas:
  "name name-2 name-3"
  "name name-2 name-3"
  "name name-2 name-3";

/* 👍 */
grid-template-areas:
  "header header"
  ". main"
  "footer footer";

/* 👎 */
grid-template-areas:
  "name name-2 name-3"
  "name name-2 name-3"
  "name name-3";

Usar caracteres Unicode para áreas de red con nombre

De acuerdo con las especificaciones, cualquier nombre que no coincida <ident> la sintaxis requiere evitar cuando se hace referencia a este dominio por su nombre en otras propiedades. Por ejemplo, en la siguiente declaración, el nombre de la primera área comienza con un número y, por lo tanto, no coincide <ident> sintaxis:

.grid {
  grid-template-areas: "1st b c";
}

La solución es declarar el no blindado código hexadecimal por 1 figura. En este caso es el hexadecimal. U+0031que evitamos en CSS como 31stEntonces, esto es lo que usamos para asignar un elemento a esta área de red nombrada:

.grid-item {
  grid-area: 31st;
}

Nombres de fila asignados implícitamente

Definición de canciones con grid-template-areas property nos da nombres de línea de forma gratuita en función de los nombres asignados.Esto es diferente de grid-template-rows y grid-template-columns propiedades donde necesitamos proporcionar nombres de fila al definir columnas y filas. no tanto con grid-template-areas propiedad porque acepta los nombres que le damos y escupe los nombres de las canciones en nuestro lugar.

Se crean cuatro líneas de red para cada nombre de área de plantilla de red. Si tenemos un área de plantilla de red con nombre sidebarobtenemos dos pares de líneas ferroviarias nombradas sidebar-start y sidebar-end - un par para la dirección de la columna y un par para la dirección de la fila:

Mostrar líneas de ruta en un diseño de red CSS creado con grid-template-areas.

Quizás se pregunte qué sucedería si definiéramos explícitamente los nombres de las canciones y usáramos el mismo nombre que obtendríamos si se definieran implícitamente, como definir explícitamente una línea de red llamada sidebar-start por sidebar área nombrada. Ambas líneas pueden existir simultáneamente y estar asignadas a diferentes elementos. En otras palabras, el valor explícito sigue siendo válido y se pueden usar ambas líneas.

Zonas nombradas implícitamente

Otra forma de nombrar áreas de red en un contenedor de red es dejar que CSS Grid las nombre implícitamente en lugar de nosotros al nombrar canciones en grid-template-columns y grid-template-rows Propiedades.

Todo lo que tenemos que hacer es elegir un nombre para el área de red y agregarlo -start y -end para los nombres de las canciones Aquí, por ejemplo, tenemos un área con un patrón de red llamado sidebar sin siquiera declarar grid-template-areas Propiedad:

.grid-container {
  display: grid;
  grid-template-columns: [sidebar-start] 250px [sidebar-end] 1fr;
}

aside {
  grid-area: sidebar;
}

Como puede ver en el ejemplo anterior, aunque no grid-template-areas propiedad para definir explícitamente un área llamada "barra lateral", pero esta área aún puede ser referenciada por propiedades de ubicación de red como grid-area, grid-row, grid-column o sus equivalentes a largo plazo.

Ejemplo: diseño receptivo del Santo Grial

En la siguiente demostración usamos grid-template-areas propiedad para crear el famoso diseño del Santo Grial con CSS Grid:

Opción alternativa para incrustar CodePen

Este diseño obtuvo su nombre debido al hecho de que era increíblemente difícil de implementar en los días en que se usaba float para los diseños. Gracias a Dios, tenemos CSS Grid para que sea casi trivial.

Primero, nuestro HTML:

<div class="grid">
  <header>Header</header>
  <main>Main Content</main>
  <aside class="left-sidebar">Left Sidebar</aside>
  <aside class="right-sidebar">Right Sidebar</aside>
  <footer>Footer</footer>  
</div>

Bastante simple por ahora, ¿verdad? Queremos que la parte superior esté en la parte superior, la columna inferior en la parte inferior y que el contenido principal sea una de las tres columnas de la fila central.

Podemos configurar las áreas con nombre de la plantilla de red CSS y cubrir las filas donde sea necesario:

.container {
  grid-template-columns: 12rem auto 12rem;
  grid-template-areas:
    "header header header"
    "left-sidebar main right-sidebar"
    "footer footer footer";    
}

Ahora necesitamos asignar cada elemento a un área de red con nombre:

header {
  grid-area: header;
}
main {
  grid-area: main;
}
footer {
  grid-area: footer;
}
.left-sidebar {
  grid-area: left-sidebar;
}
.right-sidebar {
  grid-area: right-sidebar;
}

Um, ¡técnicamente estamos listos! Eso es realmente todo lo que se necesita. Podemos llevar esto un paso más allá organizando las áreas de la cuadrícula verticalmente de forma predeterminada y luego construyendo el Santo Grial en pantallas más grandes donde se ve mucho mejor:

.container {
  display: grid;
  grid-template-areas:
    /* Each area is a row */
    "header"
    "nav"
    "article"                       
    "sidebar"                           
    "footer";
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: 12rem auto 12rem;
    grid-template-areas:
      /* Build the Holy Grail layout */
      "header header header"
      "nav article article"
      "sidebar article article"
      "footer footer footer";
  }
}