CSS/Eigenschaften/grid-area

Die Eigenschaft grid-area ist die Zusammenfassung der Eigenschaften grid-row-start, grid-column-start, sowie grid-row-end und grid-column-end. Mit ihr kann einem Element innerhab des grid ein Rasterbereich zugeordnet werden, der sich über mehrere Rasterfelder erstreckt, indem durch eine Linie, Spanne oder none Beginn und Ausmaß der grid-area festgelegt wird.

Erlaubte Werte

• siehe Einzelwerte
• none

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

siehe Einzelwerte

• grid-row-start: auto
• grid-column-start: auto
• grid-row-end: auto
• grid-column-end: auto

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

diskret

Beispiel

section {
  grid-area: 2 / 2 / auto / span 3;
}
article {
  grid-area: content;
}

Im oberen Beispiel erstreckt sich die section - beginnend ab der 2.Rasterlinie von oben und von links über eine flexible Anzahl von Rasterfeldern nach rechts und über 3 Zeilen/Reihen (Schlüsselwort span) nach unten.
Im unteren Beispiel wird article der in grid-template-areas festgelegte content-Bereich zugewiesen.

Beachten Sie: Das obere Beispiel scheint wenig intuitiv. So ist es übersichtlicher, Rasterbereiche in einem ASCII-Schema zu definieren und dann den Seitenelementen zuzuordnen.

Siehe auch

• CSS/Tutorials/Grid
  • Grid-Items#grid-area
  • benannte Linien und Rasterbereiche

Weblinks

• W3C: grid-area
• MDN: grid-area