grid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Die grid CSS-Eigenschaft ist eine Kurzschreibweise, die alle expliziten und impliziten Grid-Eigenschaften in einer einzigen Deklaration setzt.

Mit grid können Sie eine Achse mit grid-template-rows oder grid-template-columns spezifizieren und dann festlegen, wie der Inhalt auf der anderen Achse automatisch wiederholt werden soll, indem Sie die impliziten Gittereigenschaften verwenden: grid-auto-rows, grid-auto-columns und grid-auto-flow.

Probieren Sie es aus

Hinweis: Die Teil-Eigenschaften, die Sie nicht angeben, werden auf ihren Initialwert gesetzt, wie es bei Kurzschreibweisen üblich ist. Auch die Gutter-Eigenschaften werden durch diese Kurzschreibweise NICHT zurückgesetzt.

Teil-Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css
/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [line-name1] "a" 100px [line-name2];
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);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
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%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
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);

/* Global values */
grid: inherit;
grid: initial;
grid: revert;
grid: revert-layer;
grid: unset;

Werte

<'grid-template'>

Definiert die grid-template, einschließlich grid-template-columns, grid-template-rows und grid-template-areas.

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

Richtet einen Auto-Flow ein, indem die Reihen-Tracks explizit über die Eigenschaft grid-template-rows (und die Eigenschaft grid-template-columns auf none) gesetzt werden und festgelegt wird, wie die Spalten-Tracks über grid-auto-columns automatisch wiederholt werden (und grid-auto-rows auf auto setzen). Ebenso wird grid-auto-flow entsprechend auf column gesetzt, mit dense, falls es angegeben ist.

Alle anderen grid-Teil-Eigenschaften werden auf ihre Initialwerte zurückgesetzt.

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

Richtet einen Auto-Flow ein, indem die Spalten-Tracks explizit über die Eigenschaft grid-template-columns (und die Eigenschaft grid-template-rows auf none) gesetzt werden und festgelegt wird, wie die Reihen-Tracks über grid-auto-rows automatisch wiederholt werden (und grid-auto-columns auf auto setzen). Ebenso wird grid-auto-flow entsprechend auf row gesetzt, mit dense, falls es angegeben ist.

Alle anderen grid-Teil-Eigenschaften werden auf ihre Initialwerte zurückgesetzt.

Formale Definition

Anfangswertwie 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
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

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

<grid-template> =
none |
[ <'grid-template-rows'> / <'grid-template-columns'> ] |
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

<grid-template-rows> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?

<grid-auto-columns> =
<track-size>+

<grid-auto-rows> =
<track-size>+

<grid-template-columns> =
none |
<track-list> |
<auto-track-list> |
subgrid <line-name-list>?

<line-names> =
'[' <custom-ident>* ']'

<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )

<explicit-track-list> =
[ <line-names>? <track-size> ]+ <line-names>?

<track-list> =
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

<auto-track-list> =
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

<line-name-list> =
[ <line-names> | <name-repeat> ]+

<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto

<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto

<length-percentage> =
<length> |
<percentage>

<track-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<fixed-size> =
<fixed-breadth> |
minmax( <fixed-breadth> , <track-breadth> ) |
minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<auto-repeat> =
repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<name-repeat> =
repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

<fixed-breadth> =
<length-percentage [0,∞]>

Beispiele

Erstellung eines Grid-Layouts

HTML

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

CSS

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

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

Ergebnis

Spezifikationen

Specification
CSS Grid Layout Module Level 2
# grid-shorthand

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
grid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch