CSS/Eigenschaften/grid-template

Browserunterstützung
caniuse.com

Die Eigenschaft grid-template 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

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

Defaults der Einzelwerte

• grid-template-areas: none
• grid-template-rows: none
• grid-template-columns: none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

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.

Siehe auch

• CSS/Tutorials/Grid/benannte Linien und Rasterbereiche

Weblinks

• Spezifikation (CSSWG): grid-template
• Details: caniuse.com