grid

Baseline Widely available

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

Die grid CSS-Eigenschaft ist eine Kurzform-Eigenschaft, die alle expliziten und impliziten Gittereigenschaften in einer einzigen Deklaration festlegt.

Durch die Verwendung von grid spezifizieren Sie eine Achse mit grid-template-rows oder grid-template-columns, und dann geben Sie an, 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

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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element :nth-child(2) {
  background-color: rgb(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: rgb(94 255 0 / 0.2);
  border: 3px solid green;
  grid-column: auto / span 2;
}

Hinweis: Die Untereigenschaften, die Sie nicht spezifizieren, werden wie bei Kurzformen üblich auf ihren Initialwert gesetzt. Außerdem werden die Abstandseigenschaften durch diese Kurzform NICHT zurückgesetzt.

Zugehörige Eigenschaften

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 (und die grid-template-columns-Eigenschaft auf none) festgelegt und die Spaltentracks über grid-auto-columns automatisch wiederholt werden (und grid-auto-rows auf auto gesetzt wird). grid-auto-flow wird entsprechend 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 (und die grid-template-rows-Eigenschaft auf none) festgelegt und die Zeilentracks über grid-auto-rows automatisch wiederholt werden (und grid-auto-columns auf auto gesetzt wird). grid-auto-flow wird entsprechend 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 Gitterlayouts

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden