grid-template-areas

La propiedad CSS grid-template-areas especifica nombres para cada una de las grid areas.

De esta manera asociando un elemento a un area fijamos su posición dentro de la rejilla. Una ventaja importante es que nos permite ver y gestionar el posicionamiento de todos los elementos desde el padre, sin tener que navegar entre los elementos para gestionar su posicionamiento (grid-column, grid-row) de una manera bastante visual.

Asignamos áreas a los elementos hijos del contenedor.

blockquote {
  grid-area: blockquote;
}

header {
  grid-area: header;
}

aside {
  grid-area: aside;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

Combinado con grid-template-columns y grid-template-rows controlamos el tamaño de las columnas y filas.

En el siguiente ejemplo tenemos el blockquote posicionado por debajo del <header> con grid-template-areas podemos modificar su posición para colocarlo por encima del <header>.

<div>
   <header>Header</header>
   <blockquote>Blockquote</blockquote>
   <main>Main</main>
   <aside>Sidebar</aside>
   <footer>Footer</footer>
</div>

Las filas se crean listando líneas de cadenas separadas, mientras que las columnas se reflejan en cada una de las celdas que aparecen en la cadena.

div {
  grid-template-areas:
     "blockquote blockquote"
     "header header"
     "aside main"
     "footer footer"
  ;
}

grid-template-areas y :has()

Con el recientemente llegado :has podemos controlar layouts dependiendo de si un elemento está presente o no.

En este caso si existe el elemento blockquote le reservamos su espacio en la rejilla y si no, lo obviamos de manera que no generamos las columnas y filas que necesitaría evitando problemas, como por ejemplo un gap no deseado.

.wrapper:has(blockquote)[data-variant="default"] {
  grid-template-areas:
     "blockquote blockquote"
     "header header"
     "aside main"
     "footer footer"
  ;
}   
   
.wrapper[data-variant="default"] {
  grid-template-areas:
     "header header"
     "aside main"
     "footer footer"
  ;
} 

Demo

He montado una demo en codepen.io con dos ejemplos, en el primero podéis modificar el posicionamiento del mensaje cambiando en el selector el atributo que tiene el padre y determina el template-grid-area en cada caso.

En el segundo ejemplo veréis la misma estructura que el primero pero sin el mensaje y como hago la excepción en la Css obviando el grid-area para el mensaje.