CSS/Eigenschaften/grid-template-areas
Aus SELFHTML-Wiki
< CSS | Eigenschaften
Die Eigenschaft grid-template-areas legt Aufbau und Position von vorher mit grid-area bestimmten Rasterelementen fest.
erlaubte Werte |
|
---|---|
anwendbar auf | alle Elemente (Unterschied Tag Element Attribut) |
Vererbung | nein |
animierbar | nein |
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"; } }
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, IE 11 und Edge haben eine ältere Version der Spezifikation implemetiert, die diese Eigenschaft nicht kennt.
Weblinks
- W3C: grid-template-areas