CSS/Eigenschaften/grid

Browserunterstützung
caniuse.com

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

• CSS/Tutorials/Grid
  • Holy-Grail-Layout
  • Erzeugen von Spalten und Zeilen
  • Responsive Raster ohne Media Queries

Weblinks

• Spezifikation (W3C): Grid Definition Shorthand: the grid property
• Details: caniuse.com