Gracias a grids CSS es posible indicar el nombre y posición concreta de cada área de una cuadrícula. Para ello utilizaremos la propiedad grid-template-areas, donde debemos especificar el orden de las áreas en la cuadrícula. Posteriormente, en cada ítem hijo, utilizamos la propiedad grid-area para indicar el nombre del área del que se trata.
| Propiedad | Descripción |
|---|---|
grid-template-areas | Indica la disposición de las áreas en el grid. Cada texto entre comillas simboliza una fila. |
grid-area | Indica el nombre del área. Se usa sobre ítems hijos del grid. |
De esta forma, es muy sencillo crear una cuadrícula altamente personalizada en apenas unas cuantas líneas de CSS, con mucha flexibilidad en la disposición y posición de cada área.
.grid {
display: grid;
grid-template-areas:
"head head"
"menu main"
"foot foot";
}
.a {
grid-area: head;
background: blue;
}
.b {
grid-area: menu;
background: red;
}
.c {
grid-area: main;
background: green;
}
.d {
grid-area: foot;
background: orange;
}
Veamos cual es el resultado:
- El Item 1, la cabecera (head), ocuparía toda la parte superior.
- El Item 2, el menú (menu), ocuparía el área izquierda del grid, debajo de la cabecera.
- El Item 3, el contenido (main), ocuparía el área derecha del grid, debajo de la cabecera.
- El Item 4, el pie de cuadrícula (foot), ocuparía toda la zona inferior del grid.
Nota: Ten en cuenta añadir contenido de texto en cada celda del grid, para que Grid CSS detecte que esa celda no está vacía.
En la propiedad grid-template-areas, en lugar de indicar el nombre del área a colocar, también podemos indicar una palabra clave especial:
- La palabra clave none: Indica que no se colocará ninguna celda en esta posición.
- Uno o más puntos (.): Indica que se colocará una celda vacía en esta posición.