CSS grid-template-areas Eigenschaft

Definition und Verwendung

Das grid-template-areas-Attribut legt im Gitterlayout die Bereiche fest.

Sie können verwenden grid-area Namen Sie das Gitterprojekt und verweisen Sie auf diesen Namen im grid-template-areas-Attribut.

Jeder Bereich wird durch ein Apostroph definiert. Verwenden Sie einen Punkt, um unbenannte Gitterprojekte zu zitieren.

Weitere Informationen siehe:

CSS-Tutorial:CSS Netzprojekt

CSS-Referenzhandbuch:grid-area-Attribut

CSS-Referenzhandbuch:grid-template-Attribut

Beispiel

Beispiel 1

Macht das Bezeichnen des Projekts "myArea" in einem Fünfspalten-Grid-Layout über zwei Spalten erstrecken:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: "myArea myArea . . .";
}

Probieren Sie es selbst aus

Beispiel 2

Definiert zwei Zeilen, von denen "item1" in den ersten beiden Zeilen über die ersten beiden Spalten (in einem Fünfspalten-Grid-Layout) erstreckt wird:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

Probieren Sie es selbst aus

Beispiel 3

Namen für alle Elemente vergeben und ein fertiges Webseitenvorlagen erstellen:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Probieren Sie es selbst aus

CSS-Syntax

grid-template-areas: none|itemnames;

Attributswert

Wert Beschreibung
none Standardwert. Unbenannte Gitterbereiche (grid areas).
itemnames Definiert die Anordnung, wie jede Spalte und jede Zeile angezeigt werden soll.

Technische Details

Standardwert: none
Vererbung: Nein
Animationserstellung: Unterstützt. Siehe auch:Animationsspezifische Attribute.
Version: CSS Grid Layout Modul Level 1
JavaScript-Syntax: object.style.gridTemplateAreas=". . . myArea myArea"

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44