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 Rastereigenschaften in einer einzigen Deklaration festlegt.
Mit grid
geben Sie eine Achse mit grid-template-rows
oder grid-template-columns
an. Sie legen dann fest, wie Inhalte auf der anderen Achse mithilfe der impliziten Rastereigenschaften automatisch wiederholt werden sollen: 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 Sub-Eigenschaften, die Sie nicht angeben, werden wie üblich für Kurzschreibweisen auf ihren Initialwert gesetzt. Auch die Abstandseigenschaften werden durch diese Kurzschreibweise NICHT zurückgesetzt.
Zusätzliche Eigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* <'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ßlichgrid-template-columns
,grid-template-rows
undgrid-template-areas
. <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
-
Richtet einen Auto-Flow ein, indem die Zeilen-Offsets explizit über die
grid-template-rows
Eigenschaft gesetzt werden (und diegrid-template-columns
Eigenschaft aufnone
) und festlegt, wie die Spalten-Offsets übergrid-auto-columns
automatisch wiederholt werden (undgrid-auto-rows
aufauto
setzen).grid-auto-flow
ist entsprechend aufcolumn
gesetzt, mitdense
falls es angegeben ist.Alle anderen Sub-Eigenschaften von
grid
werden auf ihre Initialwerte zurückgesetzt. [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
-
Richtet einen Auto-Flow ein, indem die Spalten-Offsets explizit über die
grid-template-columns
Eigenschaft gesetzt werden (und diegrid-template-rows
Eigenschaft aufnone
) und festlegt, wie die Zeilen-Offsets übergrid-auto-rows
automatisch wiederholt werden (undgrid-auto-columns
aufauto
setzen).grid-auto-flow
ist entsprechend aufrow
gesetzt, mitdense
falls es angegeben ist.Alle anderen Sub-Eigenschaften von
grid
werden auf ihre Initialwerte zurückgesetzt.
Formale Definition
Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | Gridcontainer |
Vererbt | Nein |
Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie 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
Erstellen eines Rasterlayouts
HTML
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
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 |