¿Cómo puedo crear áreas de plantilla con nombre (grid-template-areas) en CSS Grid?

La propiedad grid-template-areas en CSS Grid es una forma de definir la estructura de tu cuadrícula y de colocar los elementos dentro de ella utilizando nombres descriptivos.

Cómo funciona:

1. Definir las áreas en el contenedor de la cuadrícula:

Primero, en el elemento contenedor que tiene display: grid;, utilizas la propiedad grid-template-areas. El valor de esta propiedad es una serie de cadenas de texto (strings), donde cada cadena representa una fila de la cuadrícula.

• Dentro de cada cadena, listas los nombres que le darás a cada celda o área de esa fila, separados por espacios.
• Si quieres que una celda quede vacía, puedes usar un punto (.) o la palabra clave none.
• Para que un área ocupe múltiples celdas (expandirse horizontal o verticalmente), simplemente repites su nombre en las celdas adyacentes que debe ocupar. Todas las celdas que forman un área con nombre deben constituir un rectángulo.
• El número de columnas se infiere del número de nombres (o puntos) en cada cadena, y el número de filas del número de cadenas. Es importante que todas las cadenas tengan el mismo número de columnas.

.contenedor-pagina {
  display: grid;
  /* Opcional, pero a menudo se combina con la definición explícita de columnas/filas */
  grid-template-columns: 200px 1fr 1fr; /* 3 columnas */
  grid-template-rows: auto 1fr auto;  /* 3 filas: cabecera, contenido, pie */
  gap: 15px; /* Espacio entre áreas */

  grid-template-areas:
    "header  header  header"   /* Fila 1: 'header' ocupa las 3 columnas */
    "sidebar main    main"     /* Fila 2: 'sidebar' 1ª col, 'main' las 2 siguientes */
    "footer  footer  footer";  /* Fila 3: 'footer' ocupa las 3 columnas */
}Lenguaje del código: PHP (php)

En este ejemplo, hemos definido una cuadrícula con áreas llamadas header, sidebar, main, y footer.

2. Asignar los elementos de la cuadrícula a las áreas con nombre:

Una vez que has definido las áreas en el contenedor, a cada elemento hijo (ítem de la cuadrícula) que quieras colocar en una de esas áreas, le aplicas la propiedad grid-area con el nombre del área correspondiente que definiste en grid-template-areas.

.elemento-cabecera {
  grid-area: header;
  background-color: lightblue;
}

.elemento-sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
}

.elemento-contenido-principal {
  grid-area: main;
  background-color: lightyellow;
}

.elemento-pie {
  grid-area: footer;
  background-color: lightcoral;
}Lenguaje del código: PHP (php)

Así, el elemento con la clase .elemento-cabecera se colocará automáticamente en el área que nombramos header, el .elemento-sidebar en el área sidebar, y así sucesivamente.

Ventajas de usar grid-template-areas:

• Visual y semántico: El código CSS refleja de forma muy clara la estructura visual del layout.
• Facilidad de reorganización: Para el diseño adaptable, cambiar el layout en diferentes breakpoints puede ser tan simple como redefinir el valor de grid-template-areas dentro de una media query, moviendo los nombres de las áreas.
• Mantenibilidad: El código es más fácil de entender y mantener, especialmente para layouts complejos.