CSS-Eigenschaft grid-template-areas

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>

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>

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.

Browser-Support

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

Übe dein Wissen

Was bedeutet die CSS-Eigenschaft 'grid-template-areas'?
Finden Sie das nützlich?