grid-template-areas
Permite definir layouts mediante nombres semánticos para distintas zonas de la cuadrícula.
- En el contenedor se usa grid-template-areas.
- Cada item se asigna con grid-area: nombre.
Ejemplo
Con grid-template-areas definimos un layout de 3 filas y 3 columnas donde cada celda tiene un nombre semántico, y cada item se coloca con grid-area. Cambia la distribución: el HTML no cambia, solo la plantilla.
ResultadoEn vivo
html
css