Automatische Größenanpassung von Spalten in CSS Grid: `auto-fill` vs. `auto-fit`

Eine der mächtigsten und bequemsten Funktionen von CSS Grid ist, dass wir neben der expliziten Spaltengröße auch die Option haben, Spalten in einem Grid zu wiederholen, um sie zu füllen, und dann Elemente darin automatisch anzuordnen. Genauer gesagt, unsere Fähigkeit, anzugeben, wie viele Spalten wir im Grid haben möchten, und dann dem Browser die Reaktionsfähigkeit dieser Spalten überlassen, weniger Spalten auf kleineren Ansichtsfenstern anzuzeigen und mehr Spalten, wenn der Bildschirmplatz mehr zulässt, ohne eine einzige Media Query schreiben zu müssen, um dieses responsive Verhalten zu diktieren.

Wir können das mit nur einer Zeile CSS erreichen – die Einzeiler, die mich daran erinnert, als Dumbledore nur mit seinem Zauberstab in Horaz' Wohnung wedelte und „die Möbel kehrten an ihre ursprünglichen Plätze zurück; Ornamente formten sich in der Luft neu, Federn flogen in ihre Kissen; zerrissene Bücher reparierten sich selbst, als sie auf ihre Regale fielen…“.

Diese magische, ohne Media Queries auskommende Reaktionsfähigkeit wird mit der repeat()-Funktion und den Schlüsselwörtern für die automatische Platzierung erreicht.

Zusammenfassend lässt sich sagen, dass die repeat()-Funktion es Ihnen ermöglicht, Spalten so oft zu wiederholen, wie es nötig ist. Wenn Sie beispielsweise ein 12-Spalten-Grid erstellen, könnten Sie Folgendes schreiben:

.grid {
   display: grid;

  /* define the number of grid columns */
  grid-template-columns: repeat(12, 1fr);
}

Das 1fr weist den Browser an, den Platz zwischen den Spalten so zu verteilen, dass jede Spalte gleichmäßig einen Bruchteil dieses Platzes erhält. Das heißt, es sind alles flüssige Spalten gleicher Breite. Und das Grid hat in diesem Beispiel immer 12 Spalten, unabhängig davon, wie breit es ist. Das ist, wie Sie wahrscheinlich bereits vermutet haben, nicht gut genug, da der Inhalt auf kleineren Ansichtsfenstern zu gequetscht wird.

Wir müssen also damit beginnen, eine Mindestbreite für die Spalten anzugeben, um sicherzustellen, dass sie nicht zu schmal werden. Das können wir mit der minmax()-Funktion erreichen.

grid-template-columns: repeat( 12, minmax(250px, 1fr) );

Aber so wie CSS Grid funktioniert, führt dies zu einem Überlauf in der Zeile. Die Spalten werden nicht in neue Zeilen umbrochen, wenn die Ansichtsfensterbreite zu schmal ist, um sie alle mit der neuen Mindestbreitenanforderung aufzunehmen, da wir dem Browser explizit sagen, die Spalten 12 Mal pro Zeile zu wiederholen.

Um das Umbrechen zu erreichen, können wir die Schlüsselwörter auto-fit oder auto-fill verwenden.

grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );

Diese Schlüsselwörter weisen den Browser an, die Spaltengröße und das Umbrechen von Elementen für uns zu handhaben, sodass die Elemente in neue Zeilen umbrochen werden, wenn die Breite nicht ausreicht, um sie ohne Überlauf aufzunehmen. Die von uns verwendete Brucheinheit stellt auch sicher, dass in dem Fall, dass die Breite einen Bruchteil einer Spalte aufnehmen kann, aber keine vollständige Spalte, dieser Platz stattdessen über die bereits passende Spalte oder Spalten verteilt wird, um sicherzustellen, dass am Ende der Zeile kein leerer Platz übrig bleibt.

Auf den ersten Blick mögen die Namen auto-fill und auto-fit Gegensätze sein. Aber tatsächlich ist der Unterschied zwischen ihnen ziemlich subtil.

Vielleicht scheint es, als ob Sie mit auto-fit zusätzlichen Platz am Ende der Spalte haben. Aber wann und wie?

Schauen wir uns an, was wirklich unter der Haube passiert.

Füllen oder Anpassen? Was ist der Unterschied?

In einem kürzlichen CSS-Workshop habe ich den Unterschied zwischen auto-fill und auto-fit wie folgt zusammengefasst:

auto-fill FÜLLT die Zeile mit so vielen Spalten, wie sie aufnehmen kann. Es erstellt also implizite Spalten, wann immer eine neue Spalte passt, weil es versucht, die Zeile mit so vielen Spalten wie möglich zu FÜLLEN. Die neu hinzugefügten Spalten können leer sein und sind es auch, aber sie nehmen dennoch einen vorgesehenen Platz in der Zeile ein.

auto-fit PASST die AKTUELL VERFÜGBAREN Spalten an den Platz an, indem sie erweitert werden, sodass sie den gesamten verfügbaren Platz einnehmen. Der Browser tut dies, nachdem er diesen zusätzlichen Platz mit zusätzlichen Spalten gefüllt hat (wie bei auto-fill) und dann die leeren Spalten kollabiert hat.

Das mag anfangs verwirrend klingen, macht aber mehr Sinn, wenn man dieses Verhalten visualisiert. Wir werden also genau das tun, wobei der Grid Inspector der Firefox DevTools uns hilft, die Größe und Position unserer Grid-Elemente und Spalten zu visualisieren.

Betrachten Sie das folgende Demo als Beispiel.

Die Spalten werden mit der repeat()-Funktion definiert und haben eine Mindestbreite von 100px und eine maximale Einstellung auf 1fr, sodass sie sich erweitern und den zusätzlichen Platz gleichmäßig teilen, wenn er verfügbar ist. Was die Anzahl der Spalten pro Zeile betrifft, werden wir die Schlüsselwörter für die automatische Platzierung verwenden, damit der Browser die Reaktionsfähigkeit des Grids übernimmt und die Spalten bei Bedarf in neue Zeilen umbricht.

Der Browser platziert und dimensioniert die Spalten im ersten Beispiel mit dem Schlüsselwort auto-fill und verwendet für das zweite auto-fit.

.grid-container--fill {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-container--fit {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Bis zu einem bestimmten Punkt zeigen sowohl auto-fill als auch auto-fit identische Ergebnisse.

Sie haben aber kein identisches Verhalten unter der Haube. Es ist nur so, dass sie bis zu einer bestimmten Ansichtsfensterbreite dasselbe Ergebnis liefern.

Der Punkt, an dem diese beiden Schlüsselwörter unterschiedliche Verhaltensweisen zeigen, hängt von der Anzahl und Größe der in grid-template-columns definierten Spalten ab, sodass er von Beispiel zu Beispiel variiert.

Der Unterschied zwischen diesen beiden Schlüsselwörtern wird deutlich, wenn das Ansichtsfenster breit genug wird, um eine (oder mehrere) zusätzliche(n) Spalte(n) in die Zeile einzupassen. Zu diesem Zeitpunkt wird der Browser mit zwei Möglichkeiten konfrontiert, mit der Situation umzugehen, und wie er damit umgeht, hängt weitgehend davon ab, ob Inhalt vorhanden ist, der in diese zusätzliche Spalte platziert werden soll.

Wenn die Zeile also eine neue Spalte aufnehmen kann, macht der Browser Folgendes:

1. „Ich habe etwas Platz, um eine neue Spalte hineinzusetzen. Habe ich Inhalt (d.h. Grid-Elemente), der in diese zusätzliche Spalte passt? Ja? OK, alles gut. Ich füge die Spalte zur Zeile hinzu, und sie wird bei kleineren Ansichtsfenstern in eine neue Zeile umbrochen.“
2. Wenn kein Inhalt vorhanden ist, der in eine neue Spalte passt: „Erlaube ich dieser neuen Spalte, Platz in der Zeile einzunehmen (und somit die Position und Größe der restlichen Zeilen zu beeinflussen)? Oder klappe ich diese Spalte zusammen und nutze ihren Platz, um die anderen Spalten zu erweitern?“

auto-fill und auto-fit liefern die Antwort auf die letztere Frage, insbesondere und bestimmen, wie der Browser dieses Szenario handhaben soll. Zusammenklappen oder nicht zusammenklappen, das ist die Frage. Und das ist auch die Antwort.
Ob Sie möchten, dass sie zusammenklappt oder nicht, hängt von Ihrem Inhalt ab und davon, wie dieser Inhalt im Kontext eines responsiven Designs funktionieren soll.

Schauen wir uns an, wie das funktioniert. Um den Unterschied zwischen auto-fill und auto-fit zu visualisieren, sehen Sie sich die folgende Bildschirmaufnahme an. Ich passe die Größe des Ansichtsfensters so an, dass horizontal genügend Platz vorhanden ist, um eine (oder mehrere) Spalte(n) in die Zeile einzufügen. Denken Sie daran, dass diese beiden Zeilen identisch sind und exakt denselben Inhalt und dieselbe Spaltenanzahl haben. Der einzige Unterschied in dieser Demo ist, dass ich für die erste auto-fill und für die zweite auto-fit verwende.

Beachten Sie, was dort passiert? Wenn es immer noch nicht klar ist, sollte die folgende Aufnahme es verdeutlichen

auto-fill-Verhalten: „FÜLL diese Zeile auf! Füge so viele Spalten hinzu, wie du kannst. Es ist mir egal, ob sie leer sind – sie sollen alle trotzdem angezeigt werden. Wenn du genug Platz hast, um eine Spalte hinzuzufügen, tue es. Es ist mir egal, ob sie leer ist oder nicht, sie nimmt trotzdem Platz in der Zeile ein, als wäre sie gefüllt (d.h. gefüllt mit Inhalt/Grid-Elementen).“

Während auto-fill die Zeile mit so vielen Spalten wie möglich füllt, auch wenn diese Spalten leer sind, verhält sich auto-fit etwas anders.
auto-fit füllt ebenfalls die Zeile mit mehr Spalten, wenn die Ansichtsfensterbreite zunimmt, aber der einzige Unterschied besteht darin, dass die neu hinzugefügten Spalten (und alle damit verbundenen Spaltengrößen) zusammengeklappt werden. Der Grid-Inspektor ist eine hervorragende Möglichkeit, dies zu visualisieren. Sie werden feststellen, dass Spalten hinzugefügt werden, wenn Sie die Grid-Liniennummern im Auge behalten, die mit zunehmender Ansichtsfensterbreite zunehmen.

auto-fit-Verhalten: „Lasse die vorhandenen Spalten in den verfügbaren Platz passen. Erweitere sie so weit wie nötig, um die Zeilengröße anzupassen. Leere Spalten dürfen keinen Platz einnehmen. Nutze diesen Platz besser, indem du die gefüllten (d.h. mit Inhalt/Grid-Elementen gefüllten) Spalten erweiterst, um den verfügbaren Zeilenplatz auszufüllen.“

Ein nützlicher Tipp hier ist, dass die in beiden Fällen hinzugefügten Spalten (ob zusammengeklappt oder nicht) keine impliziten Spalten sind – das hat eine spezifische Bedeutung in der Spezifikation. In unserem Fall fügen wir Spalten im expliziten Grid hinzu/erstellen sie, genauso als ob wir deklariert hätten, dass wir 12 Spalten wünschen, zum Beispiel. Spaltennummer -1 funktioniert also, um das Ende dieses Grids anzusprechen, was nicht der Fall ist, wenn Sie Spalten im impliziten Grid erstellen. Props an Rachel Andrew für diesen Tipp.

Zusammenfassung

Der Unterschied zwischen auto-fill und auto-fit für die Größenanpassung von Spalten ist nur dann spürbar, wenn die Zeile breit genug ist, um mehr Spalten aufzunehmen.

Wenn Sie auto-fit verwenden, dehnt sich der Inhalt aus, um die gesamte Zeilenbreite auszufüllen. Bei auto-fill hingegen lässt der Browser leere Spalten Platz in der Zeile einnehmen, wie ihre nicht leeren Nachbarn – ihnen wird ein Bruchteil des Platzes zugewiesen, auch wenn sie keine Grid-Elemente enthalten, was die Größe/Breite letzterer beeinflusst.

Welches Verhalten Sie wünschen oder bevorzugen, liegt ganz bei Ihnen. Ich habe noch keinen Anwendungsfall gefunden, bei dem auto-fill mehr Sinn ergeben würde als auto-fit. Haben Sie Anwendungsfälle? Wenn ja, teilen Sie sie bitte in den Kommentaren unten mit.

Verwandte Informationen

• Ein vollständiger Leitfaden zu CSS Grid (CSS-Tricks)
• Look Ma, No Media Queries! Responsive Layouts Using CSS Grid (CSS-Tricks)
• CSS Grid Layout: Introduction (Alligator.io)