CSS-Eigenschaft grid-template-areas

❮ Vorige Nächste ❯

Die Eigenschaft grid-template-areas wird verwendet, um bei der Einrichtung des Grid-Layouts auf den Namen zu verweisen. Sie können Gitterelemente benennen, indem Sie die Eigenschaft grid-area verwenden. Jeder Bereich wird durch Apostrophe definiert.

Einige Erweiterungen der Eigenschaft wurden hinzugefügt, wie -webkit- für Safari, Google Chrome und Opera (neuere Versionen), -moz- für Firefox, -o- für ältere Versionen von Opera usw.

Anfangswert	auto
Gilt für	Gitter-Containers
Geerbt	Nein
Animierbar	Ja, die Elemente sind animierbar.
Version	CSS Grid Layout Module Level 1
DOM Syntax	object.style.gridTemplateAreas = ''item1 item1 . .'' ''item1 item1 . .'';

Syntax

grid-template-areas: none | itemnames | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .box1 { grid-area: header; }
      .box2 { grid-area: menu; }
      .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'
      'menu main main main right right'
      'menu footer footer footer footer footer';
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #eee;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft grid-template-areas</h2>
    <div class="grid-container">
      <div class="box1">Header</div>
      <div class="box2">Menu</div>
      <div class="box3">Main</div>
      <div class="box4">Right</div>
      <div class="box5">Footer</div>
    </div>
  </body>
</html>

Versuch es selber!

In diesem Beispiel wurde dem Gitterelement der Name "item1" angegeben:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .box {
      grid-area: item1;
      }
      .grid-container {
      display: grid;
      grid-template: "item1 item1 . . .";
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #eee;
      text-align: center;
      padding: 30px 0;
      font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft grid-template</h2>
    <div class="grid-container">
      <div class="box">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
none	Es werden keine benannten Gitterbereiche definiert, das ist der Standardwert dieser Eigenschaft.
itemnames	Eine Sequenz, die die Anzeige jeder Spalte und Zeile festlegt.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.