CSS/Eigenschaften/grid

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Die Eigenschaft grid ist die Zusammenfassung der expliziten grid-Eigenschaften (grid-template-rows, grid-template-columns, und grid-template-areas), der impliziten grid-Eigenschaften (grid-auto-rows, grid-auto-columns, und grid-auto-flow), und der gutter-Eigenschaften (column-gap und row-gap)
Erlaubte Werte
  • siehe Einzelwerte
  • none
Vererbung steuernde Werte inherit, initial, unset und revert
Standardwert
  • siehe Einzelwerte
anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel
#container {
	display: grid;
	gap: 1em;
	grid: auto-flow / 1fr 1fr 1fr;
}
Das mit display: grid angelegte Raster erhält mit der grid-Eigenschaft 3 jeweils 1 fr breite Rasterfelder, d.h. der verfügbare Patz wird auf drei gleiche Anteile verteilt. Mit dem auto-flow-Algorithmus werden implizit weitere Rasterfelder in neuen Zeilen angelegt.
Beachten Sie: Es könnnen entweder die expliziten oder die impliziten Werte gesetzt werden. Nicht gesetzte Eigenschaften erhalten die Defaultwerte.

Siehe auch

Weblinks