grid-area
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-area
CSS-Kurzschreibweise spezifiziert die Größe und Position eines Grid-Elements innerhalb eines Grid, indem es eine Linie, einen Bereich oder nichts (automatisch) zu seiner Grid-Platzierung beiträgt und dadurch die Ränder seines Grid-Bereichs festlegt.
Probieren Sie es aus
Wenn vier <grid-line>
-Werte angegeben sind, wird grid-row-start
auf den ersten Wert gesetzt, grid-column-start
auf den zweiten Wert, grid-row-end
auf den dritten Wert und grid-column-end
auf den vierten Wert.
Wenn grid-column-end
weggelassen wird, wird grid-column-end
auf den <custom-ident>
gesetzt, falls grid-column-start
ein <custom-ident>
ist; andernfalls wird es auf auto
gesetzt.
Wenn grid-row-end
weggelassen wird, wird grid-row-end
auf den <custom-ident>
gesetzt, falls grid-row-start
ein <custom-ident>
ist; andernfalls wird es auf auto
gesetzt.
Wenn grid-column-start
weggelassen wird, werden alle vier Langformen auf diesen Wert gesetzt, falls grid-row-start
ein <custom-ident>
ist. Andernfalls wird es auf auto
gesetzt.
Die grid-area
-Eigenschaft kann auch auf einen <custom-ident>
gesetzt werden, der als Name für den Bereich fungiert, der dann mit Hilfe von grid-template-areas
platziert werden kann.
Bestandteileigenschaften
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* Keyword values */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;
/* <custom-ident> values */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;
/* <integer> && <custom-ident>? values */
grid-area: 4 some-grid-area;
grid-area: 4 some-grid-area / 2 another-grid-area;
/* span && [ <integer> || <custom-ident> ] values */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;
/* Global values */
grid-area: inherit;
grid-area: initial;
grid-area: revert;
grid-area: revert-layer;
grid-area: unset;
Werte
auto
-
Ist ein Schlüsselwort, das angibt, dass die Eigenschaft nichts zur Platzierung des Grid-Elements beiträgt, was eine automatische Platzierung oder eine Standardspanne von
1
angibt. <custom-ident>
-
Wenn es eine benannte Linie mit dem Namen
<custom-ident>-start
oder<custom-ident>-end
gibt, trägt es die erste solche Linie zur Platzierung des Grid-Elements bei.Hinweis: Benannte Grid-Bereiche erzeugen automatisch implizit benannte Linien dieser Form, sodass die Angabe von
grid-area: foo;
den Start-/Endrand dieses benannten Grid-Bereichs wählt (sofern nicht vorher eine andere Linie mit dem Namenfoo-start
/foo-end
explizit angegeben wurde).Andernfalls wird dies behandelt, als ob die ganze Zahl
1
zusammen mit dem<custom-ident>
angegeben worden wäre. <integer> && <custom-ident>?
-
Trägt zur N-ten Grid-Linie zur Platzierung des Grid-Elements bei. Wenn eine negative ganze Zahl angegeben ist, wird sie stattdessen rückwärts gezählt, beginnend von der Endkante des expliziten Grids.
Wenn ein Name als
<custom-ident>
angegeben ist, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird davon ausgegangen, dass alle impliziten Grid-Linien diesen Namen haben, um diese Position zu finden.Ein
<integer>
-Wert von0
ist ungültig. span && [ <integer> || <custom-ident> ]
-
Trägt einen Grid-Bereich zur Platzierung des Grid-Elements bei, sodass die entsprechende Kante des Grid-Bereichs des Grid-Elements n Linien von der gegenüberliegenden Kante entfernt ist.
Wenn ein Name als
<custom-ident>
angegeben ist, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Grid-Linien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, diesen Namen haben, um diese Spanne zu zählen.Wenn der
<integer>
weggelassen wird, wird er standardmäßig auf1
gesetzt. Negative ganze Zahlen oder 0 sind ungültig.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | Gridelemente und absolut positionierte Boxen, deren beinhaltender Block ein Gridcontainer ist |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | diskret |
Formale Syntax
grid-area =
<grid-line> [ / <grid-line> ]{0,3}
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
Beispiele
Festlegen von Grid-Bereichen
HTML
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
CSS
#grid {
display: grid;
height: 100px;
grid-template: repeat(4, 1fr) / 50px 100px;
}
#item1 {
background-color: lime;
grid-area: 2 / 2 / auto / span 3;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Grid Layout Module Level 2 # propdef-grid-area |
Browser-Kompatibilität
BCD tables only load in the browser