CSS grid-template-areas-Eigenschaft

Die grid-template-areas-Eigenschaft wird verwendet, um benannte Rasterbereiche zu definieren, indem den Rasterzellen Namen zugewiesen werden. Sie können Rasterelemente mit der grid-area-Eigenschaft benennen. Jeder Bereich wird durch doppelte Anführungszeichen definiert. Diese Bereiche können von Rasterplatzierungseigenschaften wie grid-row-start, grid-row-end, grid-column-end, grid-column-start sowie deren Kurzschreibweisen, wie grid-row, grid-area und grid-column, referenziert werden.

Anfangswert	none
Gilt für	Grid-Container.
Vererbbar	Nein.
Animierbar	Ja. Die Eigenschaft ist animierbar.
Version	CSS Grid Layout Module Level 1
DOM-Syntax	object.style.gridTemplateAreas = '"item1 item1 . ." "item1 item1 . ."';

Syntax

CSS grid-template-areas-Syntax

css

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

Beispiel für die grid-template-areas-Eigenschaft:

CSS grid-template-areas-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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";
        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>Grid-template-areas property example</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>

Try it Yourself »

Ergebnis

CSS grid-template-areas another

Beispiel für die grid-template-areas-Eigenschaft, bei dem ein Rasterelement den Namen „item1“ erhält:

CSS grid-template-areas weiteres Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template-areas: "item1 item1 . . .";
        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>Grid-template-areas property example</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>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
none	Es werden keine benannten Rasterbereiche definiert. Dies ist der Standardwert dieser Eigenschaft.	Testen »
itemnames	Eine Sequenz von Zeichenfolgen in Anführungszeichen, die die Rasterbereiche angeben.	Testen »

Practice

Wofür wird die 'grid-template-areas'-Eigenschaft in CSS verwendet?

Sie wird verwendet, um ein Layout für Elemente in einem Raster zu definieren.Sie wird verwendet, um ein Hintergrundbild für eine Webseite zu erstellen.Sie wird verwendet, um ein Muster aus benannten Rasterbereichen zu definieren, auf die von der 'grid-area'-Eigenschaft eines Rasterelements verwiesen wird.Sie wird verwendet, um die Textfarbe auf einer Webseite zu ändern.

CSS grid-template-areas-Eigenschaft ​

Syntax ​

Beispiel für die grid-template-areas-Eigenschaft: ​

Ergebnis ​

Beispiel für die grid-template-areas-Eigenschaft, bei dem ein Rasterelement den Namen „item1“ erhält: ​

Werte ​