CSS/Eigenschaften/grid-template-areas

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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 und IE 11 haben eine ältere Version der Spezifikation implemetiert, die diese Eigenschaft nicht kennt.

Weblinks