CSS gridEigenschaft
Beispiel
Erstellen Sie ein dreispaltiges Grid-Layout und legen Sie die Höhe der ersten Zeile auf 160 Pixel fest:
Selbst ausprobieren »
Tag-Definition und Verwendungshinweise
grid ist eine CSS-Shorthand-Eigenschaft für alle Grid-Container, mit der die folgenden Eigenschaften festgelegt werden können:
- Explizite Grid-Eigenschaften: grid-template-rows, grid-template-columns und grid-template-areas.
- Implizite Grid-Eigenschaften: grid-auto-rows, grid-auto-columns und grid-auto-flow.
- Abstandseigenschaften: grid-column-gap und grid-row-gap.
| Standardwert: | none none none auto auto row |
|---|---|
| Vererbt: | nein |
| animation: | unterstützt,Ansichtsunabhängige Eigenschaften。 Lesenanimierbar Probieren Sie es selbst aus |
| Version: | CSS Grid Layout Module Level 1 |
| JavaScript-Syntax: | object.style.grid="250px / auto auto auto" Probieren Sie es selbst aus |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browsersionsnummer an, die die Eigenschaft unterstützt.
| Eigenschaft | |||||
|---|---|---|---|---|---|
| grid | 57 | 16 | 52 | 10 | 44 |
Eigenschaftswert
| Wert | Beschreibung |
|---|---|
| none | Standardwert. Für Zeilen oder Spalten ist keine Größe definiert. |
| grid-template-rows / grid-template-columns | Legt die Größe von Spalten und Zeilen fest. |
| grid-template-areas | Gibt die Namen der Grid-Elemente an, die vom Grid-Layout verwendet werden. |
| grid-template-rows / grid-auto-columns | Gibt die Größe (Höhe) der Zeilen und die automatische Größe der Spalten an. |
| grid-auto-rows / grid-template-columns | Legt die automatische Größe von Zeilen fest und setzt die Eigenschaft grid-template-columns. |
| grid-template-rows / grid-auto-flow grid-auto-columns | Legt die Größe (Höhe) der Zeilen, die Funktionsweise des automatischen Layoutalgorithmus und die automatische Größe der Spalten fest. |
| grid-auto-flow grid-auto-rows / grid-template-columns | Legt die Funktionsweise des automatischen Layoutalgorithmus und die automatische Größe der Zeilen fest und setzt die Eigenschaft grid-template-columns. |
| initial | Die Eigenschaft wird auf ihren Standardwert gesetzt.Initialwert lesen |
| inherit | Erbt diese Eigenschaft vom übergeordneten Element. inherit lesen |
Online-Beispiele
Beispiel
Zwei Zeilen festlegen, wobei item1 die ersten beiden Spalten der ersten beiden Zeilen überspannt:
Selbst ausprobieren »
Beispiel
Benennen Sie alle Elemente und erstellen Sie eine sofort einsatzbereite Webvorlage:
Selbst ausprobieren »
Mehr Inhalt
CSS-Tutorial:CSS-Grid-Container
CSS-Referenzhandbuch:grid-template-areasEigenschaft
CSS-Referenzhandbuch:grid-template-rowsEigenschaft
CSS-Referenzhandbuch:grid-template-columnsEigenschaft
CSS-Referenzhandbuch:grid-auto-rowsEigenschaft
CSS-Referenzhandbuch:grid-auto-columnsEigenschaft
CSS-Referenzhandbuch:grid-auto-flowEigenschaft
CSS-Referenzhandbuch:grid-row-gapEigenschaft
CSS-Referenzhandbuch:grid-column-gapEigenschaft
Weitere Erweiterungen