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 legt die Größe und Position eines Grid-Elements innerhalb eines Grids fest, indem sie eine Linie, eine Spannweite oder nichts (automatisch) zu seiner Grid-Platzierung beiträgt und damit die Ränder seines Grid-Bereichs bestimmt.
Probieren Sie es aus
Wenn vier <grid-line>
-Werte angegeben sind, wird grid-row-start
auf den ersten Wert, grid-column-start
auf den zweiten Wert, grid-row-end
auf den dritten Wert und grid-column-end
auf den vierten Wert gesetzt.
Wenn grid-column-end
weggelassen wird und grid-column-start
ein <custom-ident>
ist, wird grid-column-end
auf dieses <custom-ident>
gesetzt; andernfalls wird es auf auto
gesetzt.
Wenn grid-row-end
weggelassen wird und grid-row-start
ein <custom-ident>
ist, wird grid-row-end
auf dieses <custom-ident>
gesetzt; andernfalls wird es auf auto
gesetzt.
Wenn grid-column-start
weggelassen wird und grid-row-start
ein <custom-ident>
ist, werden alle vier Langformen auf diesen Wert gesetzt. 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 grid-template-areas
platziert werden kann.
Bestandteile
Diese Eigenschaft ist eine Kurzform 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 Standardspannweite von
1
bedeutet. <custom-ident>
-
Wenn es eine benannte Linie mit dem Namen
<custom-ident>-start
oder<custom-ident>-end
gibt, trägt sie die erste solche Linie zur Platzierung des Grid-Elements bei.Hinweis: Benannte Grid-Bereiche erzeugen automatisch implizit benannte Linien dieser Form. Das Festlegen von
grid-area: foo;
wählt die Start-/Endkante dieses benannten Grid-Bereichs (es sei denn, eine andere Linie namensfoo-start
/foo-end
wurde vorher ausdrücklich spezifiziert).Andernfalls wird dies so behandelt, als wäre die ganze Zahl
1
zusammen mit dem<custom-ident>
angegeben worden. <integer> && <custom-ident>?
-
Trägt die n-te Gitternetzlinie zur Platzierung des Grid-Elements bei. Wenn eine negative ganze Zahl angegeben wird, zählt sie stattdessen rückwärts, 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 angenommen, dass alle impliziten Gitternetzlinien diesen Namen haben, um diese Position zu finden.Ein
<integer>
Wert von0
ist ungültig. span && [ <integer> || <custom-ident> ]
-
Trägt eine Grid-Spanne zur Platzierung des Grid-Elements bei, sodass die entsprechende Kante des Grid-Bereichs des 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 Gitternetzlinien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, diesen Namen haben, um diese Spannweite zu zählen.Wenn das
<integer>
weggelassen wird, beträgt es standardmäßig1
. 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