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.

Selecciona distribución:
ResultadoEn vivo
html
css