CSS/Eigenschaften/grid

Browserunterstützung
caniuse.com

Die Eigenschaft grid ist eine erweiterte Form von grid-template. Außer der Syntax für grid-template lässt sich eine Template-Angabe für eine der beiden Achsen mit Auto-Flow und automatischer Erzeugung für die andere Achse kombinieren. Zwischen den Angaben für Zeilen und Spalten muss weiterhin ein Schrägstrich stehen.

grid-template-rows / auto-flow dense grid-auto-columns

auto-flow dense grid-auto-rows / grid-template-rows

Heißt also: In dieser zusätzlichen Form ist das „Malen“ von benannten Bereichen nicht möglich. auto-flow und dense sind hier Schlüsselwörter. dense ist optional und kann vor oder hinter auto-flow stehen.

• • Wichtig:** Verwendet man in der grid-Eigenschaft die grid-template Syntax, werden die grid-auto-* Eigenschaften auf ihre Standardwerte zurückgesetzt!

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.
• In einer Entwurfsversion der Spezifikation war vorgesehen, dass auch die [Grid_Layout/Ausrichtung_von_Grid-Items#Spalten_.28gutter.29_mit_gap

Siehe auch

• Grid Layout
  • 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