CSS/Eigenschaften/grid-template-areas

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

• CSS/Tutorials/Grid
  • benannte Linien und Rasterbereiche

Weblinks

• W3C: grid-template-areas
• MDN: grid-template-areas