Referenz:CSS/Eigenschaften/grid-template

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft grid-template-areas CSS 3.0
Beschreibung Die grid-template-Eigenschaft ist die Zusammenfassung der Eigenschaften grid-template-areas, grid-template-rows, und grid-template-columns. Sie legt Aufbau des Rasters mit Spalten und Zeilen sowie die Position von vorher mit grid-area bestimmten Rasterelementen fest.
erlaubte Werte
  • siehe Einzeleigenschaften
default-Wert
anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
Spezifikation W3c logo klein.gif grid-template
Beispiel
body{
  display: grid;
  grid-template: "head head"
                 "nav  nav"
                 "main main"
                 "news aside" 
		 "foot foot"
                 / repeat(2, 1fr);
}

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

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.

Tipp

{{{Tipp}}}