`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-Eigenschaft ist eine Kurzschreibweise, die alle expliziten und impliziten Rastereigenschaften in einer einzigen Deklaration festlegt.

Mit grid spezifizieren Sie eine Achse mit grid-template-rows oder grid-template-columns, dann geben Sie an, wie Inhalte in der anderen Achse automatisch wiederholt werden sollen, unter Verwendung der impliziten Rastereigenschaften: 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 Teil-Eigenschaften, die Sie nicht spezifizieren, werden wie üblich für Kurzschreibweisen auf ihren Anfangswert gesetzt. Auch die Gitter-Eigenschaften werden durch diese Kurzschreibweise NICHT zurückgesetzt.

Bestandteile der Eigenschaft

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, 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 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 Zeilen-Spuren explizit über die grid-template-rows-Eigenschaft (und die grid-template-columns-Eigenschaft auf none) festgelegt werden und angegeben wird, wie die Spalten-Spuren über grid-auto-columns (und grid-auto-rows auf auto) automatisch wiederholt werden sollen. grid-auto-flow wird entsprechend auf column gesetzt, mit dense, falls spezifiziert.

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

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

Richtet einen Auto-Flow ein, indem die Spalten-Spuren explizit über die grid-template-columns-Eigenschaft (und die grid-template-rows-Eigenschaft auf none) festgelegt werden und angegeben wird, wie die Zeilen-Spuren über grid-auto-rows (und grid-auto-columns auf auto) automatisch wiederholt werden sollen. grid-auto-flow wird entsprechend auf row gesetzt, mit dense, falls spezifiziert.

Alle anderen grid-Teil-Eigenschaften 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

Ein Rasterlayout erstellen

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