Referenz:CSS/Eigenschaften/grid-template-areas

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft grid-template-areas CSS 3.0
Beschreibung Die grid-template-areas-Eigenschaft legt Aufbau und Position von vorher mit grid-area bestimmten Rasterelementen fest.
erlaubte Werte
  • none
  • <string>: eine Leerzeichen-separierte Liste von Namen
default-Wert
  • none
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Spezifikation W3c logo klein.gif grid-template-areas
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.

Tipp

{{{Tipp}}}