CSS-Eigenschaft grid-area

Die Eigenschaft grid-area gibt die Größe und die Position des Grid-Elements innerhalb der Grid-Zeile an. Es ist eine Abkürzung für die folgenden Eigenschaften:

Die Eigenschaft grid-area kann auch einen Namen für ein Gitterelement angeben. Benannte Gitterelemente können dann über die Eigenschaft grid-template-areas des Gittercontainers referenziert werden.

Anfangswert auto / auto / auto / auto
Gilt für Grid-Elemente
Geerbt Nein
Animierbar Ja, der Grid-Bereich ist animierbar.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridArea = "1 / 2 / span 2 / span 3";

Syntax

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end / itemname | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .box1 { grid-area: header; }
      .box2 { grid-area: left; }
      .box3 { grid-area: main; }
      .box4 { grid-area: right; }
      .box5 { grid-area: footer; }
      .grid-container {
      display: grid;
      grid-template-areas:
      'header header header header header header'
      'left main main main right right'
      'left footer footer footer footer footer';
      grid-gap: 5px;
      background-color: #555;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #ccc;
      text-align: center;
      padding: 30px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Grid-area</h2>
    <p>Sie können die Eigenschaft grid-area verwenden, um Gitterelemente zu benennen.</p>
    <div class="grid-container">
      <div class="box1">Header</div>
      <div class="box2">Left</div>
      <div class="box3">Main</div>
      <div class="box4">Right</div>
      <div class="box5">Footer</div>
    </div>
  </body>
</html>

Der Name von Box1 ist "itemname", der den Platz aller fünf Spalten einnimmt:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .box1 {
      grid-area: itemname;
      }
      .grid-container {
      display: grid;
      grid-template-areas: 'itemname itemname itemname itemname itemname';
      grid-gap: 5px;
      background-color: #8ebf42;
      padding: 5px;
      }
      .grid-container > div {
      background-color: #eee;
      text-align: center;
      padding: 20px 0;
      font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Grid-area</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
grid-row-start Gibt an, in welcher Zeile das Element angezeigt werden soll.
grid-column-start Gibt an, in welcher Spalte das Element angezeigt werden soll.
grid-row-end Gibt an, auf welcher Zeilenlinie das Element gestoppt werden soll oder wie viele Zeilen überbrückt werden sollen.
grid-column-end Gibt an, auf welcher Spaltenzeile das Element gestoppt werden soll oder wie viele Spalten überspannt werden sollen.
itemname Gibt einen Namen für das Element an.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
57.0+ 16.0+ 52.0+ 10.1+ 44.0+

Übe dein Wissen

Was ist die Funktion der CSS-Eigenschaft 'grid-area'?
Finden Sie das nützlich?