`grid` CSS-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2017 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die grid CSS-Kurznotation setzt alle expliziten und impliziten Rastereigenschaften in einer einzigen Deklaration.

Mit grid spezifizieren Sie eine Achse mithilfe von grid-template-rows oder grid-template-columns, und dann legen Sie fest, wie der Inhalt auf der anderen Achse automatisch wiederholt werden soll, indem Sie die impliziten Rastereigenschaften 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 auf ihren Anfangswert gesetzt, wie es bei Kurznotationen üblich ist. Außerdem werden die Abstandseigenschaften durch diese Kurznotation NICHT zurückgesetzt.

Zusätzliche Eigenschaften

Diese Eigenschaft ist eine Kurznotation 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, 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, 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 automatischen Fluss ein, indem die Zeilenstücke explizit über die grid-template-rows-Eigenschaft (und die grid-template-columns-Eigenschaft auf none) festgelegt werden und wie die Spaltenstücke über grid-auto-columns automatisch wiederholt werden sollen (und grid-auto-rows auf auto gesetzt wird). grid-auto-flow wird entsprechend auf column gesetzt, mit dense, falls es angegeben ist.

Alle anderen Untereigenschaften von grid werden auf ihre Anfangswerte zurückgesetzt.

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

Richtet einen automatischen Fluss ein, indem die Spaltenstücke explizit über die grid-template-columns-Eigenschaft (und die grid-template-rows-Eigenschaft auf none) festgelegt werden und wie die Zeilenstücke über grid-auto-rows automatisch wiederholt werden sollen (und grid-auto-columns auf auto gesetzt wird). grid-auto-flow wird entsprechend auf row gesetzt, mit dense, falls es angegeben ist.

Alle anderen Untereigenschaften von grid werden auf ihre Anfangswerte 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>? <track-size> ]+ <line-names>? )  

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

<integer> = 
  <number-token>  

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

Beispiele

Erstellen eines Rasterlayouts

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

Spezifikation
CSS Grid Layout Module Level 2 # grid-shorthand

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

grid CSS-Eigenschaft

HTML

CSS

Ergebnis

Help improve MDN

`grid` CSS-Eigenschaft