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 bestimmt die Größe und Position eines Grid-Elements innerhalb eines Grids, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu dessen Grid-Platzierung beiträgt und damit die Ränder seines Grid-Bereichs festlegt.
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;
}
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.
Wird grid-column-end weggelassen und ist grid-column-start ein <custom-ident>, wird grid-column-end auf dieses <custom-ident> gesetzt; andernfalls wird es auf auto gesetzt.
Wird grid-row-end weggelassen und ist grid-row-start ein <custom-ident>, wird grid-row-end auf dieses <custom-ident> gesetzt; andernfalls wird es auf auto gesetzt.
Wird grid-column-start weggelassen und ist grid-row-start ein <custom-ident>, werden alle vier Langformen auf diesen Wert gesetzt. Andernfalls wird es auf auto gesetzt.
Die grid-area Eigenschaft kann auch auf ein <custom-ident> gesetzt werden, das als Name für den Bereich dient, der dann durch grid-template-areas platziert werden kann.
Bestanteilende Eigenschaften
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 und auf Auto-Platzierung oder eine Standardschspanne von
1hinweist. <custom-ident>-
Wenn es eine benannte Linie mit dem Namen
<custom-ident>-startoder<custom-ident>-endgibt, trägt es die erste dieser Linien zur Platzierung des Grid-Elements bei.Hinweis: Benannte Gridbereiche generieren automatisch implizite benannte Linien in dieser Form. Das heißt, wenn
grid-area: foo;angegeben wird, wird die Anfangs-/Endkante dieses benannten Gridbereichs gewählt (es sei denn, eine andere Linie mit dem Namenfoo-start/foo-endwurde vorher explizit angegeben).Andernfalls wird dies so behandelt, als wäre die ganze Zahl
1zusammen mit dem<custom-ident>angegeben worden. <integer> && <custom-ident>?-
Trägt die n-te Gridlinie zur Platzierung des Grid-Elements bei. Wenn eine negative Ganzzahl angegeben wird, zählt sie stattdessen rückwärts vom Endrand des expliziten Grids.
Wenn ein Name als
<custom-ident>angegeben wird, werden nur Linien mit diesem Namen gezählt. Wenn nicht genug Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Gridlinien für diesen Zweck diesen Namen haben.Ein
<integer>Wert von0ist ungültig. span && [ <integer> || <custom-ident> ]-
Trägt eine Gridspanne zur Platzierung des Grid-Elements bei, sodass der entsprechende Rand des Gridbereichs des Grid-Elements 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 genug Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Gridlinien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, für diesen Zweck diesen Namen haben.Wenn der
<integer>weggelassen wird, ist der Standardwert1. Negative Ganzzahlen oder0sind 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
Grid-Bereiche festlegen
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 |