CSS grid-template-Eigenschaft

Definition und Verwendung

Die grid-template Eigenschaft ist eine Abkürzung für die folgenden Eigenschaften:

Weitere Informationen:

CSS Tutorial:CSS Netzprojekt

CSS Referenzhandbuch:grid-area Eigenschaft

CSS Referenzhandbuch:grid-template-rows Eigenschaft

CSS Referenzhandbuch:grid-template-columns Eigenschaft

CSS Referenzhandbuch:grid-template-areas Eigenschaft

Beispiel

Beispiel 1

Erstellen Sie ein dreispaltiges Rasterlayout mit einer Höhe von 150 Pixeln für die erste Spalte:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Probieren Sie es selbst aus

Beispiel 2

Definiert zwei Zeilen, von denen "item1" die ersten beiden Spalten der ersten beiden Zeilen überspannt (in einem fünfziligen Rasterlayout):

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

Probieren Sie es selbst aus

Beispiel 3

Namen aller Projekte angeben 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:
    'header 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: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Eigenschaftswert
Wert Beschreibung
none Standardwert. Definiert keine Größe der Spalten oder Zeilen.
grid-template-rows / grid-template-columns Definiert die Größe der Spalten und Zeilen.
grid-template-areas Definiert die Verwendung der benannten Projektgrids.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft von ihrem übergeordneten Element erben. Siehe inherit.

Technische Details

Standardwert: none none none
Vererbung: Nein
Animationserstellung: Unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS Grid Layout Modul Level 1
JavaScript-Syntax: object.style.gridTemplate = "250px / auto auto"

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browserversion hin, die die Eigenschaft vollständig unterstützt.

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