grid

Zusammenfassung

Die grid-CSS-Eigenschaft ist eine Kurzschrift-Eigenschaft, die alle der expliziten Gittereigenschaften (grid-template-rows, grid-template-columns und grid-template-areas) setzt, alle impliziten Gittereigenschaften (grid-auto-rows, grid-auto-columns und grid-auto-flow) sowie die Zwischenabstandseigenschaften (grid-column-gap und grid-row-gap) in einer einfachen Deklaration.

Hinweis: Sie können nur die expliziten oder die impliziten Rastereigenschaften in einer einfachen grid-Deklaration spezifizieren. Die Subeigenschaften, die Sie nicht spezifizieren, werden auf ihre Initialwerte gesetzt, wie für Kurzschrift üblich. Außerdem werden die Zwischenabstandseigenschaften durch diese Kurzschrift ebenfalls zurückgesetzt, obwohl diese nicht einmal gesetzt werden können.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufGridcontainer
VererbtNein
Prozentwertewie die jeweiligen Kurzschreibweisen:
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • grid-template-rows: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
  • grid-template-columns: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
  • grid-template-areas: wie angegeben
  • grid-auto-rows: der Prozentwert wie angegeben oder die absolute Länge
  • grid-auto-columns: der Prozentwert wie angegeben oder die absolute Länge
  • grid-auto-flow: wie angegeben
  • grid-column-gap: der Prozentwert wie angegeben oder die absolute Länge
  • grid-row-gap: der Prozentwert wie angegeben oder die absolute Länge
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Werte für <'grid-template'> */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* Werte für <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* Werte für [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Globale Werte */
grid: inherit;
grid: initial;
grid: unset;

Werte

<'grid-template'>
Defines the grid-template including grid-template-columns, grid-template-rows and grid-template-areas.
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
Sets up an auto-flow by setting the row tracks explicitly via the grid-template-rows property (and the grid-template-columns property to none) and specifying how to auto-repeat the column tracks via grid-auto-columns (and setting grid-auto-rows to auto). grid-auto-flow is also set to column accordingly, with dense if it’s specified.

All other grid sub-properties are reset to their initial values.

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Sets up an auto-flow by setting the column tracks explicitly via the grid-template-columns property (and the grid-template-rows property to none) and specifying how to auto-repeat the row tracks via grid-auto-rows (and setting grid-auto-columns to auto). grid-auto-flow is also set to row accordingly, with dense if it’s specified.

All other grid sub-properties are reset to their initial values.

Formale Syntax

<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

Beispiel

HTML-Inhalt

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS-Inhalt

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

Ergebnis

Spezifikationen

Specification Status Comment
CSS Grid Layout
Die Definition von 'grid' in dieser Spezifikation.
Anwärter Empfehlung Initial definition

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
gridChrome Vollständige Unterstützung 57
Vollständige Unterstützung 57
Vollständige Unterstützung 29
Deaktiviert
Deaktiviert From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 52
Vollständige Unterstützung 52
Keine Unterstützung 40 — 59
Deaktiviert
Deaktiviert From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 44
Vollständige Unterstützung 44
Vollständige Unterstützung 28
Deaktiviert
Deaktiviert From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 57Chrome Android Vollständige Unterstützung 57
Vollständige Unterstützung 57
Vollständige Unterstützung 29
Deaktiviert
Deaktiviert From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Vollständige Unterstützung 52
Vollständige Unterstützung 52
Keine Unterstützung 40 — 59
Deaktiviert
Deaktiviert From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 43
Vollständige Unterstützung 43
Vollständige Unterstützung 28
Deaktiviert
Deaktiviert From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.0
Vollständige Unterstützung 6.0
Vollständige Unterstützung 6.0
Hinweise
Hinweise This was added early so is out of sync with the equivalent Chromium version.

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.

Siehe auch