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 Kurzform, die alle expliziten und impliziten Grid-Eigenschaften in einer einzigen Deklaration festlegt.

Mit grid können Sie eine Achse mit grid-template-rows oder grid-template-columns angeben. Dann bestimmen Sie, wie der Inhalt in der anderen Achse mithilfe der impliziten Grid-Eigenschaften automatisch wiederholt werden soll: grid-auto-rows, grid-auto-columns, und grid-auto-flow.

Probieren Sie es aus

grid: auto-flow / 1fr 1fr 1fr;

grid: auto-flow dense / 40px 40px 1fr;

grid: repeat(3, 80px) / auto-flow;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-gap: 10px;
  width: 200px;
}

#example-element :nth-child(1) {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

#example-element :nth-child(2) {
  background-color: rgba(255, 0, 200, 0.2);
  border: 3px solid rebeccapurple;
  grid-column: auto / span 3;
  grid-row: auto / span 2;
}

#example-element :nth-child(3) {
  background-color: rgba(94, 255, 0, 0.2);
  border: 3px solid green;
  grid-column: auto / span 2;
}

Hinweis: Die Untereigenschaften, die Sie nicht spezifizieren, werden auf ihren Initialwert gesetzt, wie üblich bei Kurzformen. Auch die Spaltengröße-Eigenschaften werden durch diese Kurzform NICHT zurückgesetzt.

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurzform 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 das 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 Zeilentracks explizit über die grid-template-rows-Eigenschaft gesetzt werden (und die grid-template-columns-Eigenschaft auf none gesetzt wird) und wie die Spaltentracks automatisch wiederholt werden sollen über grid-auto-columns spezifiziert wird (und grid-auto-rows auf auto gesetzt wird). grid-auto-flow wird dementsprechend auf column gesetzt, mit dense, wenn es angegeben ist.

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

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

Richtet einen Auto-Flow ein, indem die Spaltentracks explizit über die grid-template-columns-Eigenschaft gesetzt werden (und die grid-template-rows-Eigenschaft auf none gesetzt wird) und wie die Zeilentracks automatisch wiederholt werden sollen über grid-auto-rows spezifiziert wird (und grid-auto-columns auf auto gesetzt wird). grid-auto-flow wird dementsprechend auf row gesetzt, mit dense, wenn es angegeben ist.

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

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `grid-template-rows`: `none` `grid-template-columns`: `none` `grid-template-areas`: `none` `grid-auto-rows`: `auto` `grid-auto-columns`: `auto` `grid-auto-flow`: `row` `grid-column-gap`: `0` `grid-row-gap`: `0` `column-gap`: `normal` `row-gap`: `normal`
Anwendbar auf	Gridcontainer
Vererbt	Nein
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `grid-template-rows`: beziehen sich auf die entsprechende Dimension des Inhaltsbereichs `grid-template-columns`: beziehen sich auf die entsprechende Dimension des Inhaltsbereichs `grid-auto-rows`: beziehen sich auf die entsprechende Dimension des Inhaltsbereichs `grid-auto-columns`: beziehen sich auf die entsprechende Dimension des Inhaltsbereichs
Berechneter Wert	wie 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
Animationstyp	wie die jeweiligen Kurzschreibweisen: `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list `grid-template-areas`: diskret `grid-auto-rows`: by computed value type `grid-auto-columns`: by computed value type `grid-auto-flow`: diskret `grid-column-gap`: Längenangabe `grid-row-gap`: Längenangabe `column-gap`: Längenangabe, Prozentsatz oder `calc()`; `row-gap`: Längenangabe, Prozentsatz oder `calc()`;

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

Erstellen 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