CSS Grid Layout Guide

grid-template-columns
grid-template-rows

Definiert die Spalten und Zeilen des Rasters mit einer durch Leerzeichen getrennten Liste von Werten. Die Werte repräsentieren die Spurgröße, und der Raum dazwischen repräsentiert die Rasterlinie.

Werte

• <track-size> – kann eine Länge, ein Prozentsatz oder ein Bruchteil des freien Raums im Raster sein, unter Verwendung der fr Einheit (mehr zu dieser Einheit bei DigitalOcean)
• <line-name> – ein beliebiger Name Ihrer Wahl

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

Rasterlinien erhalten automatisch positive Zahlen aus diesen Zuordnungen (wobei -1 eine Alternative für die allerletzte Zeile ist).

Sie können aber auch die Linien explizit benennen. Beachten Sie die Klammersyntax für die Liniendamen

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Beachten Sie, dass eine Linie mehr als einen Namen haben kann. Zum Beispiel wird die zweite Linie hier zwei Namen haben: row1-end und row2-start

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Wenn Ihre Definition sich wiederholende Teile enthält, können Sie die repeat() Notation verwenden, um die Dinge zu optimieren

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Was dem hier entspricht

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

Wenn mehrere Linien denselben Namen teilen, können sie über ihren Liniendamen und ihre Anzahl referenziert werden.

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

Die fr Einheit ermöglicht es Ihnen, die Größe einer Spur als Bruchteil des freien Raums des Grid-Containers festzulegen. Zum Beispiel wird dies jedes Element auf ein Drittel der Breite des Grid-Containers setzen

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Der freie Raum wird *nach* allen nicht-flexiblen Elementen berechnet. In diesem Beispiel enthält die Gesamtmenge des für die *fr*-Einheiten verfügbaren freien Raums nicht die 50px

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

Definiert eine Rastervorlage, indem die Namen der Rasterbereiche referenziert werden, die mit der grid-area-Eigenschaft angegeben werden. Das Wiederholen des Namens eines Rasterbereichs führt dazu, dass der Inhalt diese Zellen überspannt. Ein Punkt kennzeichnet eine leere Zelle. Die Syntax selbst visualisiert die Struktur des Rasters.

Werte

• <grid-area-name> – der Name eines mit grid-area angegebenen Rasterbereichs
• . – ein Punkt kennzeichnet eine leere Gitterzelle
• none – keine Rasterbereiche sind definiert

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

Beispiel

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Das erstellt ein Raster mit vier Spalten und drei Zeilen. Die gesamte oberste Zeile wird aus dem Bereich header bestehen. Die mittlere Zeile wird aus zwei main-Bereichen, einer leeren Zelle und einem sidebar-Bereich bestehen. Die letzte Zeile ist komplett footer.

Jede Zeile in Ihrer Deklaration muss dieselbe Anzahl von Zellen haben.

Sie können beliebig viele benachbarte Punkte verwenden, um eine einzelne leere Zelle zu deklarieren. Solange keine Leerzeichen zwischen den Punkten stehen, repräsentieren sie eine einzelne Zelle.

Beachten Sie, dass Sie mit dieser Syntax keine Linien benennen, sondern nur Bereiche. Wenn Sie diese Syntax verwenden, erhalten die Linien an beiden Enden der Bereiche tatsächlich automatisch Namen. Wenn der Name Ihres Rasterbereichs **_foo_** ist, lautet der Name der Startzeilenlinie und der Startspaltenlinie des Bereichs **_foo_**-start, und der Name seiner letzten Zeilenlinie und letzten Spaltenlinie lautet **_foo_**-end. Dies bedeutet, dass einige Linien mehrere Namen haben können, wie die ganz linke Linie im obigen Beispiel, die drei Namen haben wird: header-start, main-start und footer-start.

grid-template

Eine Kurzschrift zum Festlegen von grid-template-rows, grid-template-columns und grid-template-areas in einer einzigen Deklaration.

Werte

• none – setzt alle drei Eigenschaften auf ihre ursprünglichen Werte
• <grid-template-rows> / <grid-template-columns> – setzt grid-template-columns und grid-template-rows auf die angegebenen Werte bzw. setzt grid-template-areas auf none

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

Es akzeptiert auch eine komplexere, aber recht praktische Syntax zur Angabe aller drei. Hier ist ein Beispiel

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

Das ist gleichwertig mit

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

Da grid-template die impliziten Grid-Eigenschaften (grid-auto-columns, grid-auto-rows und grid-auto-flow) nicht zurücksetzt, was wahrscheinlich in den meisten Fällen das ist, was Sie tun möchten, wird empfohlen, stattdessen die grid-Eigenschaft anstelle von grid-template zu verwenden.

column-gap
row-gap
grid-column-gap
grid-row-gap

Gibt die Größe der Rasterlinien an. Man kann es sich wie die Einstellung der Breite der Rinnen zwischen den Spalten/Zeilen vorstellen.

Werte

• <line-size> – ein Längenwert

.container {
  /* standard */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /* old */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

Beispiel

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}

Die Rinnen werden nur *zwischen* den Spalten/Zeilen erzeugt, nicht an den äußeren Rändern.

Hinweis: Der grid- Präfix wird entfernt und grid-column-gap und grid-row-gap werden in column-gap und row-gap umbenannt. Die präfixfreien Eigenschaften werden bereits in Chrome 68+, Safari 11.2 Release 50+ und Opera 54+ unterstützt.

gap
grid-gap

Eine Kurzform für row-gap und column-gap

Werte

• <grid-row-gap> <grid-column-gap> – Längenwerte

.container {
  /* standard */
  gap: <grid-row-gap> <grid-column-gap>;

  /* old */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

Beispiel

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  gap: 15px 10px;
}

Wenn kein row-gap angegeben ist, wird es auf denselben Wert wie column-gap gesetzt

Hinweis: Das grid- Präfix ist veraltet (aber wer weiß, wird möglicherweise nie tatsächlich aus Browsern entfernt). Im Wesentlichen wurde grid-gap in gap umbenannt. Die präfixfreie Eigenschaft wird bereits in Chrome 68+, Safari 11.2 Release 50+ und Opera 54+ unterstützt.

justify-items

Richtet Rasterelemente entlang der *inline (Reihen)-Achse* aus (im Gegensatz zu align-items, das entlang der *block (Spalten)-Achse* ausrichtet). Dieser Wert gilt für alle Rasterelemente innerhalb des Containers.

Werte

• start – richtet Elemente bündig mit dem Startrand ihrer Zelle aus
• end – richtet Elemente bündig mit dem Endrand ihrer Zelle aus
• center – richtet Elemente in der Mitte ihrer Zelle aus
• stretch – füllt die gesamte Breite der Zelle aus (dies ist der Standard)

.container {
  justify-items: start | end | center | stretch;
}

Beispiele

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

Dieses Verhalten kann auch für einzelne Rasterelemente über die Eigenschaft justify-self festgelegt werden.

align-items

Richtet Grid-Elemente entlang der *Block (Spalten)-Achse* aus (im Gegensatz zu justify-items, das entlang der *Inline (Reihen)-Achse* ausrichtet). Dieser Wert gilt für alle Grid-Elemente innerhalb des Containers.

Werte

• stretch – füllt die gesamte Höhe der Zelle aus (dies ist der Standard)
• start – richtet Elemente bündig mit dem Startrand ihrer Zelle aus
• end – richtet Elemente bündig mit dem Endrand ihrer Zelle aus
• center – richtet Elemente in der Mitte ihrer Zelle aus
• baseline – richtet Elemente entlang der Textgrundlinie aus. Es gibt Modifikatoren für baseline – first baseline und last baseline, die bei mehrzeiligem Text die Grundlinie der ersten oder letzten Zeile verwenden.

.container {
  align-items: start | end | center | stretch;
}

Beispiele

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

Dieses Verhalten kann auch für einzelne Rasterelemente über die Eigenschaft align-self festgelegt werden.

Es gibt auch die Modifikatoren safe und unsafe (Anwendung ist wie align-items: safe end). Das Schlüsselwort safe bedeutet „versuche, so auszurichten, aber nicht, wenn es bedeutet, ein Element so auszurichten, dass es in einen unzugänglichen Überlaufbereich verschoben wird“, während unsafe erlaubt, Inhalte in unzugängliche Bereiche zu verschieben („Datenverlust“).

place-items

place-items setzt sowohl die align-items als auch die justify-items Eigenschaften in einer einzigen Deklaration.

Werte

• <align-items> / <justify-items> – Der erste Wert setzt align-items, der zweite Wert justify-items. Wenn der zweite Wert weggelassen wird, wird der erste Wert beiden Eigenschaften zugewiesen.

Weitere Details finden Sie unter align-items und justify-items.

Dies kann sehr nützlich für eine superschnelle multidirektionale Zentrierung sein

.center {
  display: grid;
  place-items: center;
}

justify-content

Manchmal kann die Gesamtgröße Ihres Rasters kleiner sein als die Größe seines Rastercontainers. Dies kann passieren, wenn alle Ihre Rasterelemente mit unflexiblen Einheiten wie px bemessen sind. In diesem Fall können Sie die Ausrichtung des Rasters innerhalb des Rastercontainers festlegen. Diese Eigenschaft richtet das Raster entlang der Inline (Reihen)-Achse aus (im Gegensatz zu align-content, das das Raster entlang der Block (Spalten)-Achse ausrichtet).

Werte

• start – richtet das Raster bündig mit dem Startrand des Rastercontainers aus
• end – richtet das Raster bündig mit dem Endrand des Rastercontainers aus
• center – richtet das Raster in der Mitte des Rastercontainers aus
• stretch – ändert die Größe der Rasterelemente, damit das Raster die volle Breite des Rastercontainers ausfüllen kann
• space-around – platziert einen gleichmäßigen Abstand zwischen jedem Rasterelement, mit halb großen Abständen an den äußeren Enden
• space-between – platziert einen gleichmäßigen Abstand zwischen jedem Rasterelement, ohne Abstand an den äußeren Enden
• space-evenly – platziert einen gleichmäßigen Abstand zwischen jedem Rasterelement, einschließlich der äußeren Enden

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

Beispiele

.container {
  justify-content: start;
}

.container {
  justify-content: end;    
}

.container {
  justify-content: center;    
}

.container {
  justify-content: stretch;    
}

.container {
  justify-content: space-around;    
}

.container {
  justify-content: space-between;    
}

.container {
  justify-content: space-evenly;    
}

align-content

Manchmal kann die Gesamtgröße Ihres Rasters kleiner sein als die Größe seines Rastercontainers. Dies kann passieren, wenn alle Ihre Rasterelemente mit unflexiblen Einheiten wie px bemessen sind. In diesem Fall können Sie die Ausrichtung des Rasters innerhalb des Rastercontainers festlegen. Diese Eigenschaft richtet das Raster entlang der Block (Spalten)-Achse aus (im Gegensatz zu justify-content, das das Raster entlang der Inline (Reihen)-Achse ausrichtet).

Werte

• start – richtet das Raster bündig mit dem Startrand des Rastercontainers aus
• end – richtet das Raster bündig mit dem Endrand des Rastercontainers aus
• center – richtet das Raster in der Mitte des Rastercontainers aus
• stretch – ändert die Größe der Rasterelemente, damit das Raster die volle Höhe des Rastercontainers ausfüllen kann
• space-around – platziert einen gleichmäßigen Abstand zwischen jedem Rasterelement, mit halb großen Abständen an den äußeren Enden
• space-between – platziert einen gleichmäßigen Abstand zwischen jedem Rasterelement, ohne Abstand an den äußeren Enden
• space-evenly – platziert einen gleichmäßigen Abstand zwischen jedem Rasterelement, einschließlich der äußeren Enden

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

Beispiele

.container {
  align-content: start;    
}

.container {
  align-content: end;    
}

.container {
  align-content: center;    
}

.container {
  align-content: stretch;    
}

.container {
  align-content: space-around;    
}

.container {
  align-content: space-between;    
}

.container {
  align-content: space-evenly;    
}

place-content

place-content setzt sowohl die align-content als auch die justify-content Eigenschaften in einer einzigen Deklaration.

Werte

• <align-content> / <justify-content> – Der erste Wert setzt align-content, der zweite Wert justify-content. Wenn der zweite Wert weggelassen wird, wird der erste Wert beiden Eigenschaften zugewiesen.

Alle großen Browser außer Edge unterstützen die Kurzform place-content.

Weitere Details finden Sie unter align-content und justify-content.

grid-auto-columns
grid-auto-rows

Gibt die Größe aller automatisch generierten Rasterspuren (auch implizite Rasterspuren genannt) an. Implizite Spuren werden erstellt, wenn es mehr Rasterelemente als Zellen im Raster gibt oder wenn ein Rasterelement außerhalb des expliziten Rasters platziert wird. (siehe Der Unterschied zwischen expliziten und impliziten Rastern)

Werte

• <track-size> – kann eine Länge, ein Prozentsatz oder ein Bruchteil des freien Raums im Raster sein (unter Verwendung der fr Einheit)

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

Um zu veranschaulichen, wie implizite Rasterspuren erstellt werden, denken Sie an Folgendes

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

Dies erstellt ein 2x2-Raster.

Stellen Sie sich nun aber vor, Sie verwenden grid-column und grid-row, um Ihre Rasterelemente wie folgt zu positionieren

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

Wir haben .item-b angewiesen, bei Spaltenlinie 5 zu beginnen und bei Spaltenlinie 6 zu enden, *aber wir haben nie eine Spaltenlinie 5 oder 6 definiert*. Da wir auf nicht existierende Linien verwiesen haben, werden implizite Spuren mit einer Breite von 0 erstellt, um die Lücken zu füllen. Wir können grid-auto-columns und grid-auto-rows verwenden, um die Breiten dieser impliziten Spuren anzugeben

.container {
  grid-auto-columns: 60px;
}

grid-auto-flow

Wenn Sie Rasterelemente haben, die Sie nicht explizit im Raster platzieren, tritt der Auto-Platzierungsalgorithmus in Kraft, um die Elemente automatisch zu platzieren. Diese Eigenschaft steuert, wie der Auto-Platzierungsalgorithmus funktioniert.

Werte

• row – weist den Auto-Platzierungsalgorithmus an, jede Zeile der Reihe nach zu füllen und bei Bedarf neue Zeilen hinzuzufügen (Standard)
• column – weist den Auto-Platzierungsalgorithmus an, jede Spalte der Reihe nach zu füllen und bei Bedarf neue Spalten hinzuzufügen
• dense – weist den Auto-Platzierungsalgorithmus an, zu versuchen, Lücken früher im Raster zu füllen, wenn später kleinere Elemente auftauchen

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

Beachten Sie, dass dense nur die visuelle Reihenfolge Ihrer Elemente ändert und dazu führen kann, dass sie außer der Reihe erscheinen, was schlecht für die Barrierefreiheit ist.

Beispiele

Betrachten Sie dieses HTML

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

Sie definieren ein Raster mit fünf Spalten und zwei Zeilen und setzen grid-auto-flow auf row (was auch der Standard ist)

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

Beim Platzieren der Elemente im Raster geben Sie nur Spots für zwei davon an

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

Da wir grid-auto-flow auf row gesetzt haben, wird unser Raster so aussehen. Beachten Sie, wie die drei Elemente, die wir nicht platziert haben (item-b, item-c und item-d), über die verfügbaren Zeilen fließen

Wenn wir stattdessen grid-auto-flow auf column setzen, fließen item-b, item-c und item-d die Spalten hinunter

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

grid

Eine Kurzform zum Festlegen aller folgenden Eigenschaften in einer einzigen Deklaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns und grid-auto-flow (Hinweis: Sie können nur die expliziten oder die impliziten Grid-Eigenschaften in einer einzigen Grid-Deklaration angeben).

Werte

• none – setzt alle Untereigenschaften auf ihre Anfangswerte.
• <grid-template> – funktioniert genauso wie die Kurzform grid-template.
• <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? – setzt grid-template-rows auf den angegebenen Wert. Wenn das Schlüsselwort auto-flow rechts vom Schrägstrich steht, setzt es grid-auto-flow auf column. Wenn das Schlüsselwort dense zusätzlich angegeben wird, verwendet der Auto-Platzierungsalgorithmus einen „dichten“ Packalgorithmus. Wenn grid-auto-columns weggelassen wird, wird es auf auto gesetzt.
• [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> – setzt grid-template-columns auf den angegebenen Wert. Wenn das Schlüsselwort auto-flow links vom Schrägstrich steht, setzt es grid-auto-flow auf row. Wenn das Schlüsselwort dense zusätzlich angegeben wird, verwendet der Auto-Platzierungsalgorithmus einen „dichten“ Packalgorithmus. Wenn grid-auto-rows weggelassen wird, wird es auf auto gesetzt.

Beispiele

Die folgenden zwei Codeblöcke sind äquivalent

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

Die folgenden zwei Codeblöcke sind äquivalent

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

Die folgenden zwei Codeblöcke sind äquivalent

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

Und die folgenden beiden Codeblöcke sind äquivalent

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

Es akzeptiert auch eine komplexere, aber recht praktische Syntax, um alles auf einmal festzulegen. Sie geben grid-template-areas, grid-template-rows und grid-template-columns an, und alle anderen Untereigenschaften werden auf ihre ursprünglichen Werte gesetzt. Was Sie tun, ist, die Liniendamen und Spurgrößen inline mit ihren jeweiligen Gitterbereichen anzugeben. Dies lässt sich am einfachsten mit einem Beispiel beschreiben

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

Das ist gleichwertig mit

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}