CSS grid-template-areasEigenschaft
Beispiel
Das folgende Beispiel benennt item1 "myArea" und erstreckt sich über fünf Spalten:
Selbst ausprobieren »
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft unterstützt.
| Eigenschaft | |||||
|---|---|---|---|---|---|
| grid-template-areas | 57 | 16 | 52 | 10 | 44 |
Definition und Verwendungshinweise zur Eigenschaft
Die Eigenschaft grid-template-areas wird verwendet, um das Grid-Layout festzulegen.
Die grid-area-Eigenschaft kann verwendet werden, um Grid-Elemente zu benennen.
Auf benannte Grid-Elemente kann über die Eigenschaft grid-template-areas des Containers verwiesen werden.
Jede Zeile wird in einfachen Anführungszeichen' 'definiert, durch Leerzeichen getrennt.
.Eine Zahl kennzeichnet ein Grid-Element ohne Namen.
| Standardwert: | auto |
|---|---|
| Vererbt: | nein |
| animation: | Supported.Mehr erfahren überanimierbar Probieren Sie es selbst aus |
| Version: | CSS Grid Layout Module Level 1 |
| JavaScript-Syntax: | object.style.gridTemplateAreas=". . . myArea myArea" Jetzt ausprobieren |
Syntax
grid-template-areas: none|itemnames;
| Wert | Beschreibung |
|---|---|
| none | Standardwert, kein benanntes Grid referenziert. |
| itemnames | Legt fest, wie jede Spalte und Zeile angezeigt werden soll. |
Weitere Beispiele
.Die Zahl gibt ein Grid-Element ohne Namen an.Beispiel
Selbst ausprobieren »
Das folgende Beispiel legt fest, dass "item1" sich über 2 Zeilen und 2 Spalten erstreckt:
Beispiel
Selbst ausprobieren »
Benennen Sie alle Grid-Elemente und erstellen Sie eine Webseiten-Vorlage:
Beispiel
Selbst ausprobieren »
Ähnliche Artikel
CSS-Tutorial:CSS Grid Layout
CSS-Referenzhandbuch:grid-areaEigenschaft
CSS-Referenzhandbuch:grid-templateEigenschaft
Weitere Erweiterungen