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 legt die Größe und Position eines Grid-Elements innerhalb eines Grids fest, indem sie eine Linie, eine Spannweite oder nichts (automatisch) zu seiner Grid-Platzierung beiträgt und damit die Ränder seines Grid-Bereichs bestimmt.

Probieren Sie es aus

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.

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 grid-area Eigenschaft kann auch auf einen <custom-ident> gesetzt werden, der als Name für den Bereich fungiert, der dann mit grid-template-areas platziert werden kann.

Bestandteile

Diese Eigenschaft ist eine Kurzform 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 Standardspannweite von 1 bedeutet.

<custom-ident>

Wenn es eine benannte Linie mit dem Namen <custom-ident>-start oder <custom-ident>-end gibt, trägt sie die erste solche Linie zur Platzierung des Grid-Elements bei.

Hinweis: Benannte Grid-Bereiche erzeugen automatisch implizit benannte Linien dieser Form. Das Festlegen von grid-area: foo; wählt die Start-/Endkante dieses benannten Grid-Bereichs (es sei denn, eine andere Linie namens foo-start/foo-end wurde vorher ausdrücklich spezifiziert).

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

<integer> && <custom-ident>?

Trägt die n-te Gitternetzlinie zur Platzierung des Grid-Elements bei. Wenn eine negative ganze Zahl angegeben wird, zählt sie stattdessen rückwärts, 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 angenommen, dass alle impliziten Gitternetzlinien diesen Namen haben, um diese Position zu finden.

Ein <integer> Wert von 0 ist 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 ist, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Gitternetzlinien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, diesen Namen haben, um diese Spannweite zu zählen.

Wenn das <integer> weggelassen wird, beträgt es standardmäßig 1. Negative ganze Zahlen oder 0 sind ungültig.

Formale Definition

Initialer Wertwie 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

BCD tables only load in the browser

Siehe auch