CSS/Eigenschaften/grid-template

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
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

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

Weblinks