Zusammenfassung
Die grid-
CSS-Eigenschaft ist eine Kurzschrift-Eigenschaft, die alle der expliziten Gittereigenschaften (grid-template-rows
, grid-template-columns
und grid-template-areas
) setzt, alle impliziten Gittereigenschaften (grid-auto-rows
, grid-auto-columns
und grid-auto-flow
) sowie die Zwischenabstandseigenschaften (grid-column-gap
und grid-row-gap
) in einer einfachen Deklaration.
Hinweis: Sie können nur die expliziten oder die impliziten Rastereigenschaften in einer einfachen grid
-Deklaration spezifizieren. Die Subeigenschaften, die Sie nicht spezifizieren, werden auf ihre Initialwerte gesetzt, wie für Kurzschrift üblich. Außerdem werden die Zwischenabstandseigenschaften durch diese Kurzschrift ebenfalls zurückgesetzt, obwohl diese nicht einmal gesetzt werden können.
Initialwert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | Gridcontainer |
Vererbt | Nein |
Prozentwerte | wie die jeweiligen Kurzschreibweisen:
|
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | diskret |
Syntax
/* Werte für <'grid-template'> */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
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);
/* Werte für <'grid-template-rows'> /
[ auto-flow && dense? ] <'grid-auto-columns'>? */
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%;
/* Werte für [ auto-flow && dense? ] <'grid-auto-rows'>? /
<'grid-template-columns'> */
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);
/* Globale Werte */
grid: inherit;
grid: initial;
grid: unset;
Werte
<'grid-template'>
- Defines the
grid-template
includinggrid-template-columns
,grid-template-rows
andgrid-template-areas
. <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
- Sets up an auto-flow by setting the row tracks explicitly via the
grid-template-rows
property (and thegrid-template-columns
property tonone
) and specifying how to auto-repeat the column tracks viagrid-auto-columns
(and settinggrid-auto-rows
toauto
).grid-auto-flow
is also set tocolumn
accordingly, withdense
if it’s specified.All other
grid
sub-properties are reset to their initial values. [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
- Sets up an auto-flow by setting the column tracks explicitly via the
grid-template-columns
property (and thegrid-template-rows
property tonone
) and specifying how to auto-repeat the row tracks viagrid-auto-rows
(and settinggrid-auto-columns
toauto
).grid-auto-flow
is also set torow
accordingly, withdense
if it’s specified.All other
grid
sub-properties are reset to their initial values.
Formale Syntax
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Beispiel
HTML-Inhalt
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS-Inhalt
#container {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
background-color: #8ca0ff;
width: 50px;
height: 50px;
}
Ergebnis
Spezifikationen
Specification | Status | Comment |
---|---|---|
CSS Grid Layout Die Definition von 'grid' in dieser Spezifikation. |
Anwärter Empfehlung | Initial definition |
Browserkompatibilität
BCD tables only load in the browser
Siehe auch
- Verwandte CSS-Eigenschaften:
grid-template
,grid-template-rows
,grid-template-columns
,grid-template-areas
,grid-auto-columns
,grid-auto-rows
,grid-auto-flow