Der Unterschied zwischen expliziten und impliziten Grids

Grid Layout gibt uns endlich die Möglichkeit, Grids in CSS zu definieren und Elemente in Grid-Zellen zu platzieren. Das allein ist schon großartig, aber die Tatsache, dass wir nicht jeden Track angeben *müssen* und nicht jedes Element manuell platzieren *müssen*, macht das neue Modul noch besser. Grids sind flexibel genug, um sich an ihre Elemente anzupassen.

Das alles wird durch das sogenannte explizite und implizite Grid gehandhabt.

Alle Codebeispiele in diesem Beitrag werden von Bildern begleitet, um Grid-Linien und Tracks anzuzeigen. Wenn Sie selbst mit dem Code experimentieren möchten, empfehle ich Ihnen, Firefox Nightly herunterzuladen, da es derzeit die besten DevTools zum Debuggen von Grids bietet.

Explizite Grids

Wir können eine feste Anzahl von Linien und Tracks definieren, die ein Grid bilden, indem wir die Eigenschaften grid-template-rows, grid-template-columns und grid-template-areas verwenden. Dieses manuell definierte Grid wird als explizites Grid bezeichnet.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 20px;
}

Wiederholende Tracks

Wenn wir grid-template-columns: 1fr 1fr 1fr 1fr; definieren, erhalten wir vier vertikale Tracks mit jeweils einer Breite von 1fr. Wir können das automatisieren, indem wir die repeat()-Notation verwenden, so wie hier grid-template-columns: repeat(4, 1fr);. Das erste Argument gibt die Anzahl der Wiederholungen an, das zweite eine Trackliste, die so oft wiederholt wird.

Eine Trackliste? Ja, Sie können tatsächlich mehrere Tracks wiederholen.

Automatische Wiederholung von Tracks

Die Repeat-Notation ist sehr nützlich, aber sie kann noch weiter automatisiert werden. Anstatt eine feste Anzahl von Wiederholungen festzulegen, können wir die Schlüsselwörter auto-fill und auto-fit verwenden.

Auto-filling Tracks

Das Schlüsselwort auto-fill erstellt so viele Tracks, wie in den Grid-Container passen, ohne dass das Grid überläuft.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 20px;
}

Beachten Sie, dass repeat(auto-fill, 1fr); nur einen Track erstellt, da ein einzelner Track mit einer Breite von 1fr den gesamten Grid-Container bereits ausfüllt eine ungültige Deklaration ist (vielleicht hat sich das geändert? Ich weiß es nicht).

Auto-fitting Tracks

Das Schlüsselwort auto-fit verhält sich genauso wie auto-fill, mit der Ausnahme, dass nach der Platzierung von Grid-Elementen nur so viele Tracks erstellt werden, wie benötigt werden, und jeder leere wiederholte Track zusammenfällt.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-gap: 20px;
}

Im Beispiel, das in diesem Abschnitt verwendet wird, sieht das Grid mit repeat(auto-fit, 100px); und repeat(4, 100px); gleich aus. Der Unterschied ist sichtbar, wenn mehr als 4 Grid-Elemente vorhanden sind.

Wenn mehr Elemente vorhanden sind, erstellt auto-fit mehr Spalten.

Wenn andererseits eine feste Anzahl von vertikalen Tracks in der Repeat-Notation verwendet wird und die Anzahl der Elemente diesen Wert überschreitet, werden weitere Zeilen hinzugefügt. Mehr dazu erfahren Sie im nächsten Abschnitt: Implizite Grids.

Ich habe der Einfachheit halber grid-template-columns in den obigen Beispielen verwendet, aber alle Regeln gelten auch für grid-template-rows.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  grid-gap: 20px;
  height: 100%;
}

html, body {
  height: 100%;
}

Implizite Grids

Wenn mehr Grid-Elemente vorhanden sind als Zellen im Grid oder wenn ein Grid-Element außerhalb des expliziten Grids platziert wird, generiert der Grid-Container automatisch Grid-Tracks, indem er Grid-Linien zum Grid hinzufügt. Das explizite Grid bildet zusammen mit diesen zusätzlichen impliziten Tracks und Linien das sogenannte implizite Grid.

.item:first-child {
  grid-column-start: -1;
}

.item:nth-child(2) {
  grid-row-start: 4;
}

Die Breiten und Höhen der impliziten Tracks werden automatisch festgelegt. Sie sind gerade groß genug, um die platzierten Grid-Elemente aufzunehmen, aber es ist möglich, dieses Standardverhalten zu ändern.

Größenbestimmung von impliziten Tracks

Die Eigenschaften grid-auto-rows und grid-auto-columns geben uns die Kontrolle über die Größe von impliziten Tracks.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 100px;
  grid-gap: 20px;
  grid-auto-columns: 200px;
  grid-auto-rows: 60px;
}

Implizite Tracks haben nun immer eine Breite von 200px und eine Höhe von 60px, unabhängig davon, ob das Grid-Element passt oder nicht.

Sie können größenbestimmte implizite Tracks flexibler gestalten, indem Sie einen Bereich mit der minmax()-Notation angeben.

.grid {
  grid-auto-columns: minmax(200px, auto);
  grid-auto-rows: minmax(60px, auto);
}

Implizite Tracks sind nun mindestens 200px breit und 60px hoch, werden sich aber ausdehnen, wenn der Inhalt dies erfordert.

Erweiterung des Grids zum Anfang

Implizite Tracks können nicht nur am Ende des expliziten Grids hinzugefügt werden. Es kann auch vorkommen, dass das explizite Grid zum Anfang hin erweitert werden muss.

.item:first-child {
  grid-row-end: 2;
  grid-row-start: span 2;
}

.item:nth-child(2) {
  grid-column-end: 2;
  grid-column-start: span 2;
}

Jedes Element endet an der zweiten Linie und erstreckt sich über 2 Zellen (eine vertikal, die andere horizontal). Da nur eine Zelle vor der zweiten Linie vorhanden ist, wird auf jeder Seite ein weiterer impliziter Track zum Grid hinzugefügt.

Automatische Platzierung

Wie bereits erwähnt, werden implizite Tracks auch hinzugefügt, wenn die Anzahl der Elemente die Anzahl der Zellen übersteigt. Standardmäßig platziert der Auto-Placement-Algorithmus Elemente, indem er jede Zeile nacheinander füllt und bei Bedarf neue Zeilen hinzufügt. Wir können festlegen, wie automatisch platzierte Elemente in das Grid fließen, indem wir die Eigenschaft grid-auto-flow verwenden.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 100px;
  grid-gap: 20px;
  grid-auto-flow: column;
}

Anstelle von Zeilen werden Spalten mit Elementen gefüllt und zusätzliche implizite Spalten erstellt.

Kein explizites Grid definieren

Da es möglich ist, Zellen mit grid-auto-rows und grid-auto-columns automatisch zu skalieren, ist es nicht zwingend erforderlich, ein explizites Grid zu definieren.

.grid {
  display: grid;
  grid-auto-columns: minmax(60px, 200px);
  grid-auto-rows: 60px;
  grid-gap: 20px;
}

.item:first-child {
  grid-row: span 2;
}

.item:nth-child(2) {
  grid-column: 1 / span 2;
}

.item:nth-child(5) {
  grid-column: 3;
}

Das ausschließliche Verlassen auf das implizite Grid kann in Kombination mit expliziter Platzierung verwirrend und schwer verständlich sein. In diesem Beispiel ist das erste Element auto platziert und erstreckt sich über 2 Zeilen, das zweite Element ist explizit in der ersten Spalte platziert und erstreckt sich über 2 Spalten, wodurch ein zweiter vertikaler Track entsteht. Das dritte und vierte Element würden tatsächlich beide automatisch in der vierten Zeile platziert werden, aber das fünfte Element ist explizit in der zuvor nicht vorhandenen dritten Spalte platziert. Dies erstellt einen dritten vertikalen Track und aufgrund des Auto-Placements von Grid bewegt sich das dritte Element eine Zeile nach oben, um den Platz zu füllen.

Fazit

Dieser Artikel deckt nicht alles ab, was es über das explizite und implizite Grid zu wissen gibt, aber er sollte Ihnen ein mehr als solides Verständnis des Konzepts vermitteln. Zu wissen, warum und wie implizite Linien und Tracks erstellt werden, ist entscheidend für die Arbeit mit Grid Layout.

Sie finden alle in diesem Artikel verwendeten Beispiele in einer Sammlung auf CodePen.

Wenn Sie mehr über Grids erfahren möchten, lesen Sie Der vollständige Leitfaden zu Grid, Erste Schritte mit CSS Grid, Grid By Example und Eine Sammlung interessanter Fakten über CSS Grid Layout.