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 spezifiziert die Größe und Position eines Grid-Elements innerhalb eines Grid, indem es eine Linie, einen Bereich oder nichts (automatisch) zu seiner Grid-Platzierung beiträgt und dadurch die Ränder seines Grid-Bereichs festlegt.

Probieren Sie es aus

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 den <custom-ident> gesetzt, falls grid-column-start ein <custom-ident> ist; andernfalls wird es auf auto gesetzt.

Wenn grid-row-end weggelassen wird, wird grid-row-end auf den <custom-ident> gesetzt, falls 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, falls grid-row-start ein <custom-ident> ist. 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 Hilfe von grid-template-areas platziert werden kann.

Bestandteileigenschaften

Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:

Syntax

css
/* 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 1 angibt.

<custom-ident>

Wenn es eine benannte Linie mit dem Namen <custom-ident>-start oder <custom-ident>-end gibt, trägt es die erste solche Linie 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-/Endrand dieses benannten Grid-Bereichs wählt (sofern nicht vorher eine andere Linie mit dem Namen foo-start/foo-end explizit angegeben wurde).

Andernfalls wird dies behandelt, als ob die ganze Zahl 1 zusammen mit dem <custom-ident> angegeben worden wäre.

<integer> && <custom-ident>?

Trägt zur N-ten Grid-Linie zur Platzierung des Grid-Elements bei. Wenn eine negative ganze Zahl angegeben ist, wird sie stattdessen rückwärts gezählt, 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 davon ausgegangen, dass alle impliziten Grid-Linien diesen Namen haben, um diese Position zu finden.

Ein <integer>-Wert von 0 ist ungültig.

span && [ <integer> || <custom-ident> ]

Trägt einen Grid-Bereich zur Platzierung des Grid-Elements bei, sodass die entsprechende Kante des Grid-Bereichs des Grid-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 Grid-Linien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, diesen Namen haben, um diese Spanne zu zählen.

Wenn der <integer> weggelassen wird, wird er standardmäßig auf 1 gesetzt. Negative ganze Zahlen oder 0 sind ungültig.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufGridelemente und absolut positionierte Boxen, deren beinhaltender Block ein Gridcontainer ist
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypdiskret

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

html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
grid-area

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch