CSS/Eigenschaften/grid-template-areas

Die Eigenschaft grid-template-areas legt Aufbau und Position von vorher mit grid-area bestimmten Rasterelementen fest.

erlaubte Werte	none <string>: eine Leerzeichen-separierte Liste von Namen Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: * none
anwendbar auf	alle Elemente (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

body{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "head head"
                       "nav  nav"
                       "main main"
                       "news aside" 
		       "foot foot";
}

@media (min-width: 30em) { 
  body{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "head head head"
                         "nav  news aside"
                         "main main main" 
		         "foot foot foot";
 }
}

In schmalen Viewports werden die Kindelemente des body in zwei Spalten angeordnet. Bei einem größen Viewport wird auf ein 3-Spalten-Layout mit geänderter Anordnung umgeschaltet.

Beachten Sie: Die Browser IE10, IE 11 und Edge haben eine ältere Version der Spezifikation implemetiert, die diese Eigenschaft nicht kennt.

Weblinks

• W3C: grid-template-areas