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 Kurzform-Eigenschaft spezifiziert die Größe und Position eines Rasterelements innerhalb eines Rasters, indem es eine Linie, eine Spanne oder nichts (automatisch) zu seiner Rasterplatzierung beiträgt und so die Ränder seines Rasterbereichs 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 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 das <custom-ident> gesetzt, wenn grid-column-start ein <custom-ident> ist; andernfalls wird es auf auto gesetzt.
Wenn grid-row-end weggelassen wird, wird grid-row-end auf das <custom-ident> gesetzt, wenn 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, wenn grid-row-start ein <custom-ident> ist. 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 mittels grid-template-areas platziert werden kann.
Zusammengesetzte Eigenschaften
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 Rasterelements beiträgt und eine automatische Platzierung oder eine Standardspanne von
1anzeigt. <custom-ident>-
Falls eine benannte Linie mit dem Namen
<custom-ident>-startoder<custom-ident>-endexistiert, trägt sie die erste solche Linie zur Platzierung des Rasterelements bei.Hinweis: Benannte Rasterbereiche generieren automatisch implizit benannte Linien dieser Form. Wird also
grid-area: foo;angegeben, wählt dies die Start-/Endkante des benannten Rasterbereichs (es sei denn, eine andere Linie mit dem Namenfoo-start/foo-endwurde vorher explizit angegeben).Andernfalls wird dies so behandelt, als wäre die Ganzzahl
1zusammen mit dem<custom-ident>angegeben worden. <integer> && <custom-ident>?-
Trägt die n-te Rasterlinie zur Platzierung des Rasterelements bei. Wenn eine negative Ganzzahl angegeben ist, wird stattdessen rückwärts gezählt, beginnend vom Endrand des expliziten Rasters.
Falls 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 Rasterlinien diesen Namen zu Zwecken der Bestimmung dieser Position haben.Ein
<integer>-Wert von0ist ungültig. span && [ <integer> || <custom-ident> ]-
Trägt eine Rasterspanne zur Platzierung des Rasterelements bei, sodass die entsprechende Kante des Rasterbereichs n Linien von der gegenüberliegenden Kante entfernt ist.
Falls 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 Rasterlinien auf der Seite des expliziten Rasters, die der Suchrichtung entspricht, diesen Namen zu Zwecken der Zählung dieser Spanne haben.Wenn das
<integer>ausgelassen wird, ist es standardmäßig1. Negative Ganzzahlen 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
Rasterbereiche 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 |
Browser-Kompatibilität
Loading…