grid-template

Die CSS-Eigenschaft grid-template ist eine Kurzschreibweise, mit der Sie mit einer einzigen Deklaration Rasterspalten, -zeilen und -bereiche in einem CSS-Rastercontainer definieren können.

.grid-container {
  display: grid;
  grid-template:
    "header  header"
    "sidebar main"   1fr
    "footer  footer" min-content
    / 250px   1fr;
}

Bestandteileigenschaften

Wie erwähnt, ist grid-template eine Kurzschreibweise, die mehrere Eigenschaften kombiniert. Welche Eigenschaften, fragen Sie? Das sind die drei

Syntax

Die grid-template hat mehrere Syntaxen, die in verschiedenen Varianten erhältlich sind, aber wie folgt definiert wird

grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

• Anfangswert: wie jede der Eigenschaften der Kurzschreibweise, was für alle none ist.
• Gilt für: Grid-Container
• Vererbt: nein
• Berechneter Wert: wie angegeben, jedoch mit relativen Längen, die für die Eigenschaften grid-template-columns und grid-template-rows in absolute Längen umgewandelt werden.
• Animationstyp: einfache Liste von Länge, Prozent oder Calc, vorausgesetzt, die einzigen Unterschiede liegen in den Werten der Längen-, Prozent- oder Calc-Komponenten in der Liste für grid-template-columns und grid-template-rows und diskret für grid-template-areas.

Werte

/* Keyword value */
grid-template: none;
grid-template: "col-1 col-2 col-3";
grid-template: "header header header" "sidebar main main";
grid-template:
  "header header header"
  "sidebar main main"
  ". footer footer";

/* grid-template-rows / grid-template-columns values */
grid-template: 100px 1fr / 300px 1fr;
grid-template: min-content 1fr / 200px 1fr 200px;
grid-template: [line1] 100px / [sidebar] 250px [content] 1fr;
grid-template: repeat(4, auto) / repeat(4, minmax(100px, 1fr));

/* grid-template-areas grid-template-rows / grid-template-column values */
grid-template:
  "header header"
  "sidebar main"
  "footer footer";
grid-template:
  "header header header" min-content
  "main main main" 1fr;
grid-template:
  [row1-top] "header header" 100px [row1-bottom]
  "sidebar main" 1fr [row2-bottom] / [col1-start] 300px [col1-end] 1fr;

/* Global values */
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: unset;

none

Dies ist der Standardwert. none setzt alle drei Eigenschaften auf ihre Anfangswerte, was bedeutet, dass keine benannten Rasterbereiche und keine expliziten Rasterspuren vorhanden sind, die diese Eigenschaft auf dem Rastercontainer definiert. Es bedeutet auch, dass Rasterspuren implizit generiert und von den Eigenschaften grid-auto-columns und grid-auto-rows dimensioniert werden.

Beachten Sie, dass die Eigenschaft grid-template nicht der einzige Weg ist, explizite Rasterspuren zu erstellen. Dies können wir auch mit den Eigenschaften grid-template-columns und grid-template-rows tun.

<'grid-template-rows'> / <'grid-template-columns'>

Diese Form der grid-template-Syntax definiert Zeilen und Spalten auf einem Rastercontainer in einer einzigen Deklaration, während der Wert grid-template-areas auf none gesetzt wird. Wir trennen die Werte mit einem Schrägstrich / dazwischen, so.

.grid-container {
  display: grid;
  grid-template: min-content 1fr / 200px 1fr 200px;
}

…was dem Schreiben ohne Kurzschreibweise entspricht

.grid-container {
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 200px 1fr 200px;
  grid-template-areas: none;
}

Die Reihenfolge ist wichtig. Die Werte vor dem Schrägstrich legen grid-template-rows fest und die Werte nach dem Schrägstrich legen die Eigenschaft grid-template-columns fest.

Hier ist ein weiteres Beispiel, bei dem explizite Liniennamen für unser Raster verwendet werden

/* One row of 100px and two columns of 250px and 1fr: */
.grid-container {
  display: grid;
  grid-template: [line1] 100px / [sidebar] 250px [content] 1fr;
}

…was wieder dem Schreiben ohne Kurzschreibweise entspricht

.grid-container {
  display: grid;
  grid-template-rows: [line1] 100px;
  grid-template-columns: [sidebar] 250px [content] 1fr;
  grid-template-areas: none;
}

[ <Zeilennamen>? <Zeichenkette> <Spurgröße>? <Zeilennamen>? ]+ [ / <explizite Spurliste> ]?

Die Eigenschaft grid-template akzeptiert auch eine Syntax, die es uns ermöglicht, die Rasterspalten, -zeilen und -bereiche gleichzeitig explizit anzugeben.

grid-template:
  "header  header"
  "sidebar main"   1fr
  "footer  footer" min-content
  / 200px   1fr;

header, sidebar, main und footer sind die Namen der Rasterbereiche für einen Rastercontainer. Die Anzahl der Namen innerhalb jeder Zeichenkette gibt die Anzahl der Spalten an (was im obigen Beispiel zwei pro Zeile ist).

Die Werte nach den Spalten – wie 1fr und min-content oben – stellen die <track-size> für jede Zeile dar. Wenn wir keine Spurengröße für eine Zeile angeben, wie in der ersten Zeile des obigen Beispiels, wird die Größe dieser Zeile auf auto gesetzt.

Die letzte Zeile des Beispiels enthält einen Schrägstrich (/), gefolgt von zwei Längenwerten. Diese legen die Spaltengrößen fest. Und da wir zwei Spalten pro Zeile haben, müssen wir zwei Größen angeben. Wir haben die erste Spalte auf 200px Breite und die zweite Zeile auf 1fr gesetzt.

Grundlegende Verwendung

.grid {
  display: grid;
  gap: 1rem;
  grid-template: "header  header"
                  "sidebar main"   1fr
                  "footer  footer" min-content
                / 200px   1fr;
}

Der obige Code entspricht dem Folgenden

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr min-content;
  grid-template-areas: "header header"
                        "sidebar main"
                        "footer footer";
}

Und das hat das folgende Ergebnis

Es ist eine Kurzschreibweise für explizite Rastereigenschaften, nicht für implizite

Die Eigenschaft grid-template setzt nur die expliziten Rastereigenschaften auf ihre Anfangswerte und hat keine Auswirkungen auf die impliziten Rastereigenschaften wie grid-auto-columns, grid-auto-rows und grid-auto-flow. Dafür gibt es eine weitere Kurzschreibweise namens grid, die die gleiche Syntax hat, aber auch die impliziten Rastereigenschaften zurücksetzt.

Hier ist, was passiert, wenn Sie die Eigenschaft grid-template auf none setzen

grid-template: none;

/* is equivalent to: */
grid-template-rows: none;
grid-template-columns: none;
grid-template-areas: none;

Es gibt viele Möglichkeiten, Rasterlinien zu definieren

Das Benennen von Rasterlinien ist eine beliebte Methode, um deren Erstellung zu erleichtern, aber es gibt mehrere Möglichkeiten, dies zu tun. Eine Möglichkeit ist, jeder Linie mehrere Namen zu geben, um Dinge als Start- und Endlinien zu betrachten.

.grid {
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
}

Eine coole Sache an CSS Grid ist, dass es die Dinge automatisch für uns nummeriert. Das bedeutet, dass wir die Zahlen beim Platzieren von Rasterelementen auf den Linien eines Rastercontainers weglassen können. Anstatt also col1 und col2 zu schreiben, wie wir es oben getan haben, können wir einfach col gefolgt von der gewünschten Liniennummer schreiben.

.grid-item {
  grid-column-start: col 2;
}

Es ist sogar noch cooler, wenn wir diese Technik bei Rastern mit vielen Spalten anwenden

.grid {
  grid-template-columns: repeat(4, [col] 100px);
}

Jetzt haben wir vier Spalten, die 100px breit sind und automatisch nummerierte Rasterlinien mit dem Namen col haben, die wir zum Platzieren von Elementen im Raster verwenden können.

.grid-item {
  grid-column: col 2 / col 4;
}

Natürlich haben wir das Schlüsselwort span, was bedeutet, dass wir die Dinge noch weiter vereinfachen können.

.grid-item {
  grid-column: col 2 / span 2;
}

Hier ist ein Beispiel, bei dem wir zwei Rasterlinien haben. line-1 ist die Rasterlinie zwischen der ersten und der zweiten Zeile und line-2 ist die Linie zwischen der zweiten und der letzten Zeile.

grid-template:
  "header  header"
  [line-1] "sidebar main" 1fr [line-2]
  "footer  footer" min-content
/ 200px   1fr;

Wir können auch die Größe der Rasterlinien zwischen den Spalten festlegen

grid-template:
  [row1-top]    "header  header" 100px [row1-bottom]
  [content-top] "sidebar main"   1fr [row2-bottom]
/ [col1-start]  150px    1fr     [col2-end content-end];

Beachten Sie, wie die Verwendung von Leerzeichen helfen kann, den Code besser lesbar zu machen, indem die Spalten in jeder Zeile ausgerichtet werden.

• Zeile 1: 100px hoch mit den Rasterlinien row1-top und row1-bottom
• Zeile 2: Nimmt den verbleibenden Platz ein, dank 1fr, mit den Rasterlinien content-top und row2-bottom.
• Spalte 1: 150px breit mit einem Liniennamen col1-start
• Spalte 2: Nimmt den verbleibenden Platz mit 1fr und einem Liniennamen ein, der zwei Namen hat: col2-end und content-end.

Manchmal kann eine Illustration hilfreich sein, um zu sehen, was vor sich geht.

Seien Sie vorsichtig bei der Verwendung der repeat()-Funktion

Sie wurde nicht dafür entwickelt, mit der grid-template-Eigenschaft zu funktionieren! Die Idee ist, dass repeat() das saubere Schreiben von Dingen, bei denen alles mit Leerzeichen ausgerichtet werden kann – so etwas wie eine einfache Visualisierung des Rasters – behindern würde.

.grid {
  display: grid;
  grid-template: "header  header"
                  "sidebar main"   1fr
                  "footer  footer" min-content
                / 200px   1fr;
}

Demo

Lassen Sie uns ein responsives Layout für eine Webseite mit der grid-template-Eigenschaft erstellen. Zuerst ein Standard-CSS-Raster für eine Stapelung von Elementen in einer einzigen Spalte.

/* Define the grid */
.grid {
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "left-sidebar"
    "right-sidebar"
    "footer";     
  gap: 1rem;
}

/* Place the items on the grid */
header {
  grid-area: header;
}

.left-sidebar {
  grid-area: left-sidebar;
}

.right-sidebar {
  grid-area: right-sidebar;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

Klingt gut. Aber was wir wirklich wollen, ist ein 3x3-Raster auf größeren Bildschirmen. Etwas wie dieses.

Lassen Sie uns also dieses Layout innerhalb einer Media Query mit grid-template erstellen.

@media (min-width: 600px) {
  .grid {
    grid-template:
      "header             header             header"         min-content
      "left-sidebar       main               right-sidebar"  1fr
      "footer             footer             footer"         min-content
    / minmax(auto, 250px) minmax(250px, 1fr) minmax(auto, 250px);
  }
}

Browser-Unterstützung

Weitere Informationen

• CSS Grid Layout Module Level 2
• Die grid-template Kurzschreibweise (Rachel Andrew)
• Verwenden Sie die Grid-Kurzschreibweise, um explizite CSS-Grid-Spuren zu visualisieren (thoughtbot)

Verwandt