CSS/Eigenschaften/grid-template-areas

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft grid-template-areas legt Aufbau und Position von mit grid-area bestimmten Rasterelementen fest

Erlaubte Werte
  • none
  • <string>: eine Leerzeichen-separierte Liste von Namen
Vererbung steuernde Werte inherit, initial, unset und revert
Standardwert

none

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

diskret

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";
 }
}
header {
  grid-area: head;	
}
In schmalen Viewports werden die Kindelemente des body in einem Raster mit zwei Spalten angeordnet. Bei einem größen Viewport wird auf ein 3-Spalten-Layout mit geänderter Anordnung umgeschaltet.
In grid-template-areas werden nun Rasterbereiche in einem ASCII-Schema festgelegt. Diese Rasterbereiche können mit grid-area bestimmten Elementen zugeordnet werden.

Siehe auch

Weblinks