CSS Grid: grid-template-areas
La proprietà grid-template-areas permette di definire layout usando nomi descrittivi.
Definire le aree
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;
}Assegnare elementi alle aree
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Aree vuote
Usa il punto (.) per celle vuote:
grid-template-areas:
"header header ."
"sidebar main main";