CSS-Eigenschaft grid-area

❮ Vorige Nächste ❯

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:

grid-row-start
grid-column-end
grid-row-end
grid-column-end

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>

Versuch es selber!

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>

Versuch es selber!

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.