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:
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

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

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

BCD tables only load in the browser

Siehe auch