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 Oktober 2017.
Die grid-area CSS Kurzschreibweise legt die Größe und Position eines Grid-Elements innerhalb eines Grids fest, indem eine Linie, eine Spanne oder nichts (automatisch) zu dessen Gitterplatzierung beiträgt und somit die Ränder seines Grid-Bereichs spezifiziert.
Probieren Sie es aus
grid-area: a;
grid-area: b;
grid-area: c;
grid-area: 2 / 1 / 2 / 4;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">Example</div>
</div>
</section>
.example-container {
border: 1px solid #c5c5c5;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, minmax(40px, auto));
grid-template-areas:
"a a a"
"b c c"
"b c c";
grid-gap: 10px;
width: 200px;
}
.example-container > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
}
#example-element {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
}
Werden vier <grid-line>-Werte angegeben, 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, wird, falls grid-column-start ein <custom-ident> ist, grid-column-end auf dieses <custom-ident> gesetzt; andernfalls wird es auf auto gesetzt.
Wenn grid-row-end weggelassen wird, wird, falls grid-row-start ein <custom-ident> ist, grid-row-end auf dieses <custom-ident> gesetzt; andernfalls wird es auf auto gesetzt.
Wenn grid-column-start weggelassen wird, werden, falls grid-row-start ein <custom-ident> ist, alle vier Langformwerte auf diesen Wert gesetzt. Andernfalls wird es auf auto gesetzt.
Die grid-area-Eigenschaft kann auch auf einen <custom-ident> gesetzt werden, welcher als Name für den Bereich dient und dann mittels grid-template-areas platziert werden kann.
Bestandteileigenschaften
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 Standardsapnne von
1bedeutet. <custom-ident>-
Wenn es eine benannte Linie mit dem Namen
<custom-ident>-startoder<custom-ident>-endgibt, trägt sie die erste dieser Linien 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- oder Endrand dieses benannten Grid-Bereichs wählt (sofern nicht zuvor eine andere Linie namensfoo-start/foo-endexplizit angegeben wurde).Andernfalls wird dies so behandelt, als wäre die Zahl
1zusammen mit dem<custom-ident>angegeben worden. <integer> && <custom-ident>?-
Trägt die n-te Gitterlinie zur Platzierung des Grid-Elements bei. Wenn eine negative Zahl angegeben wird, zählt sie stattdessen rückwärts, beginnend vom Endrand des expliziten Grids.
Wenn ein Name als
<custom-ident>angegeben wird, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen vorhanden sind, wird angenommen, dass alle impliziten Gitterlinien diesen Namen zugeordnet sind, um diese Position zu finden.Ein
<integer>-Wert von0ist ungültig. span && [ <integer> || <custom-ident> ]-
Trägt zur Spanne eines Gitterelements zur Gitterplatzierung bei, sodass der entsprechende Rand des Gitterbereichs des Gitterelements n Linien vom gegenüberliegenden Rand entfernt ist.
Wenn ein Name als
<custom-ident>angegeben wird, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen vorhanden sind, wird angenommen, dass alle impliziten Gitterlinien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, diesen Namen haben, um diese Spanne zu zählen.Wenn das
<integer>weggelassen wird, ist der Standardwert1. Negative Zahlen oder 0 sind ungültig.
Formale Definition
| Anfangswert | 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 Gitterbereichen
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 |