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-Shorthand-Eigenschaft gibt die Größe und Position eines Grid-Items innerhalb eines Grids an, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu seiner Gitterplatzierung beiträgt und somit 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: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgba(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.

Wenn grid-column-end weggelassen wird, wird, falls grid-column-start ein <custom-ident> ist, grid-column-end auf dieses <custom-ident> gesetzt; andernfalls wird es auf auto gesetzt.

Wenn grid-row-end weggelassen wird, wird, falls grid-row-start ein <custom-ident> ist, grid-row-end auf dieses <custom-ident> gesetzt; andernfalls wird es auf auto gesetzt.

Wenn grid-column-start weggelassen wird, werden alle vier Langform-Eigenschaften 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 ein <custom-ident> gesetzt werden, das als Name für den Bereich dient, der dann mit Hilfe von grid-template-areas platziert werden kann.

Bestandteileneigenschaften

Diese Eigenschaft ist eine Kurzform der 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-Items beiträgt und für automatische Platzierung oder eine standardmäßige Spanne von 1 steht.

<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-Items bei.

Hinweis: Benannte Grid-Bereiche erzeugen automatisch implizit benannte Linien dieser Form, sodass die Angabe von grid-area: foo; den Start-/Endrand des benannten Grid-Bereichs wählt (sofern nicht zuvor explizit eine andere Linie mit dem Namen foo-start/foo-end definiert wurde).

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

<integer> && <custom-ident>?

Trägt die n-te Gitterlinie zur Platzierung des Grid-Items bei. Wenn eine negative Ganzzahl angegeben wird, wird sie umgekehrt 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 existieren, wird angenommen, dass alle impliziten Gitterlinien für diesen Zweck diesen Namen tragen.

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

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

Trägt eine Gitterspanne zur Platzierung des Grid-Items bei, so dass der entsprechende Rand des Gitterbereichs des Grid-Items 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 genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Gitterlinien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, diesen Namen tragen.

Wenn der <integer> weggelassen wird, wird standardmäßig 1 angenommen. Negative Ganzzahlen 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

Siehe auch