grid-area CSS-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2017 browserübergreifend verfügbar.
Die grid-area CSS Kurzschreibweise legt die Größe und Position eines Grid-Elements innerhalb eines Grids fest, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu seiner Platzierung im Grid beiträgt und damit 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;
}
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, 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 Eigenschaft grid-area kann auch auf ein <custom-ident> gesetzt werden, das als Name für den Bereich fungiert und dann mit 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
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. Wenn also
grid-area: foo;angegeben wird, wird der Start-/Endrand dieses benannten Grid-Bereichs gewählt (es sei denn, eine andere Linie namensfoo-start/foo-endwurde vorher explizit angegeben).Andernfalls wird dies so behandelt, als ob die ganze Zahl
1zusammen mit dem<custom-ident>angegeben worden wäre. <integer> && <custom-ident>?-
Trägt die n-te Grid-Linie zur Platzierung des Grid-Elements bei. Wenn eine negative ganze Zahl angegeben wird, wird stattdessen in umgekehrter Reihenfolge gezählt, 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 davon ausgegangen, dass alle impliziten Grid-Linien für diesen Zweck diesen Namen tragen.Ein
<integer>-Wert von0ist 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 wird, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen vorhanden sind, wird davon ausgegangen, dass alle impliziten Grid-Linien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, für diesen Zweck diesen Namen tragen.Wenn die
<integer>weggelassen wird, beträgt ihr Standardwert1. Negative ganze 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> ] ]
<integer> =
<number-token>
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
| Spezifikation |
|---|
| CSS Grid Layout Module Level 2 # propdef-grid-area |