Automatische Größenanpassung der Spalten CSS Grid: “auto-fill” – vs – “auto-fit”

0
71

Einer der mächtigsten und praktische CSS-Grid-Funktionen ist, dass neben expliziten Spalte Größenanpassung, haben wir die Möglichkeit, Sie zu wiederholen-zu-füllen Sie die Spalten in einem Raster, und klicken Sie dann auto-Gegenstände in Ihnen. Genauer gesagt, unsere Fähigkeit, um anzugeben, wie viele Spalten wir wollen in der Startaufstellung und dann lassen Sie den browser mit der Reaktionsfähigkeit jener Spalten, die für uns anzeigen weniger Spalten auf kleineren viewport-Größen und-mehr Spalten als der screen-estate ermöglicht, ohne schreiben eines einzigen media query zu diktieren, das responsive Verhalten.

Wir sind in der Lage zu tun, dass mit nur einer Zeile CSS — Einzeiler, das erinnert mich an, wenn Dumbledore winkte seinen Zauberstab in Horace ‘ s Wohnung und “die Möbel flogen zurück an Ihre ursprünglichen Plätze; Ornamente reformierten in der Luft, Federn gezoomt in Ihre Kissen; zerrissene Bücher reparierten sich selbst, als Sie landeten auf Ihren Regalen…”.

Diese Magische, media-query-weniger Reaktionsfähigkeit erreichen Sie mit der wiederholen () – Funktion und die automatische Platzierung von keywords.

Viel ist geschrieben worden über diese Besondere one-liner, also werde ich nicht ausführlich, wie es funktioniert. Tim Wright ist ein großer writeup auf dieser, ich empfehle die Lektüre.

Um zusammenzufassen, die wiederholen () – Funktion können Sie wiederholen Sie die Spalten so oft wie nötig. Zum Beispiel, wenn Sie eine 12-Spalten grid, könnten Sie schreiben Sie den folgenden Einzeiler:

.grid {
display: grid;

/* definieren Sie die Anzahl der Tabellenspalten */
grid-template-columns: wiederholen(12, 1fr);
}

Die 1fr ist, was sagt dem browser zu verteilen, der Raum zwischen den Spalten, so dass jede Spalte gleich, wird ein Bruchteil des Raumes. Das heißt, Sie sind alle Flüssigkeit, gleich Breite Spalten. Und das raster wird in diesem Beispiel, haben immer 12 Spalten, unabhängig davon, wie weit es ist. Dies ist, wie Sie wahrscheinlich schon erraten haben, ist nicht gut genug, denn die Inhalte werden auch zerquetscht auf kleineren viewports.

Wir müssen also durch die Angabe einer Mindest-Breite für die Spalten, so dass Sie nicht bekommen, zu schmal. Wir können tun, dass mit Hilfe der minmax () – Funktion.

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

Aber die Art und Weise CSS-Raster arbeitet, wird es zu überlauf in der Zeile. Die Spalten werden nicht wickeln Sie in neuen Zeilen, wenn die viewport-Breite ist zu schmal, um zu passen Sie alle mit der neuen Mindestbreite Anforderung, weil wir ausdrücklich sagen, der browser wiederholen den Spalten 12 mal pro Zeile.

Erreichen, wickeln, wir können mit dem auto-fit-oder die auto-fill-keywords.

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

Diese Stichworte sagen, die browser behandeln die Spalte Größenanpassung und element Verpackung für uns, so dass die Elemente wrap-Zeilen, wenn die Breite nicht groß genug ist, um Sie fit, ohne überlauf. Die Fraktion Einheit, die wir verwendet, auch sichergestellt, dass im Fall der Breite lässt sich für einen Bruchteil einer Spalte zu passen, aber nicht eine ganze Spalte,, Raum wird stattdessen verteilt auf die Spalte oder Spalten, passt schon, dafür, dass wir Links sind nicht mit einem leeren Raum am Ende der Zeile.

Auf den ersten Blick den Namen, es könnte scheinen, wie auto-fill und auto-fit sind Gegensätze. Aber in der Tat, der Unterschied zwischen sehr subtil ist.

Vielleicht scheint es, wie Sie immer extra-Raum am Ende der Spalte mit auto-fit. Aber Wann und wie?

Lassen Sie uns nehmen einen Blick an, was ist wirklich passiert unter der Haube.

Füllen oder Passen? Was ist der Unterschied?

In einer aktuellen CSS-workshop, den ich zusammengefasst der Unterschied zwischen auto-fill und auto-fit wie folgt:

auto-fill FÜLLT die Zeile so viele Spalten, wie es passt. So schafft es die implizite Spalten, wenn Sie eine neue Spalte passen, weil es versucht, FÜLLEN die Zeile so viele Spalten, wie es ist. Die neu hinzugefügten Spalten kann und darf leer sein, aber es sind noch zu besetzen einen Raum bezeichnet, in die Reihe.

auto-fit PASST die AKTUELL VERFÜGBAREN Spalten in den Raum durch den ausbau Sie so, dass Sie den verfügbaren Platz. Der browser erkennt, dass nach dem BEFÜLLEN, extra-Raum mit extra-Spalten (wie bei auto-fill ) und dann kollabiert die leere.

Das klingt zunächst verwirrend, aber es macht viel mehr Sinn, wenn du dir vorstellst, dieses Verhalten. Also werden wir tun genau das, mit dem Firefox DevTools’ Raster-Inspektor uns helfen, visualisieren Sie die Größe und position des Grid-Elemente und Spalten.

Betrachten Sie die folgende demo als Beispiel.

Finden Sie den Stift, auto-fill-vs-auto-fit von Sara Soueidan (@SaraSoueidan) auf CodePen.

Die Spalten definiert sind, mit der wiederholen () – Funktion und haben eine minimale Breite von 100 Pixel und eine maximale eingestellt 1fr , so dass Sie zu erweitern und zu gleichen teilen jedem zusätzlichen Platz, wenn es verfügbar ist. Für die Anzahl der Spalten pro Zeile, die wir verwenden, das auto-Platzierung von keywords, so lassen wir den browser kümmern sich um die Reaktionsfähigkeit der Gitter und wickeln Sie die Spalten in neue Zeilen, wenn nötig.

Der browser wird Ort und Größe der Spalten in dem ersten Beispiel mit der auto-fill-Schlüsselwort, und es wird mit auto-fit für die zweite.

.raster-container–füllen {
grid-template-columns: wiederholen(auto-füllen, minmax(100px, 1fr));
}

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

Bis zu einem bestimmten Punkt, beide, auto-fill und auto-fit zeigen identische Ergebnisse.

Aber Sie müssen nicht identisch Verhalten unter der Haube. Es passiert einfach so, dass Sie das gleiche Ergebnis bis zu einer bestimmten viewport-Breite.

Der Punkt, an dem diese beiden Schlüsselwörter beginnen ausstellenden verschiedene Verhalten hängt von der Anzahl und Größe der definierten Spalten in der grid-template-columns, so dass es unterscheidet sich von einem Beispiel zum anderen.

Der Unterschied zwischen diesen zwei keywords wird sichtbar gemacht, wenn der viewport wird breit genug, um einen (oder mehrere) zusätzliche Spalte(N) () in der Zeile. An diesem Punkt, der browser präsentiert sich mit zwei Möglichkeiten, mit der situation umzugehen, und wie er geht, es hängt davon ab, ob oder nicht es ist content platziert werden in die extra-Spalte.

Also, wenn die Zeile passt, eine neue Spalte, der browser geht wie:

  1. “Ich habe etwas Platz, um sich eine neue Spalte. Habe ich irgendwelche Inhalte (z.B. grid-Elemente) gehen in die extra-Spalte? Ja? OK, alles gut. Ich werde fügen Sie die Spalte, in der Zeile, und es wird wickeln Sie in eine neue Zeile auf kleineren viewports.”
  2. In dem Fall, wo es keinen Inhalt in eine neue Spalte: “kann ich diese neue Spalte zu belegen Speicherplatz in der Zeile (und, deshalb, Einfluss auf die position und Größe der rest der Zeilen)? oder muss ich Zusammenbruch, Spalte und nutzen Sie dessen Speicherplatz, um erweitern Sie die anderen Spalten?”

auto-fill und auto-fit geben die Antwort auf die Letzte Frage im besonderen und diktieren, wie der browser sollte dieses Szenario behandelt. Zu reduzieren bzw. nicht zu kollabieren, das ist die Frage. Und das ist auch die Antwort.
Ob Sie wollen, dass es zu kollabieren oder nicht, hängt von Ihrem Inhalt, und wie Sie wollen, dass die Inhalte sich im Kontext von responsive design.

Mal sehen, wie das funktioniert. Zu visualisieren, den Unterschied zwischen auto-fill und auto-fit, werfen Sie einen Blick auf die folgenden screen-recording. Ich bin Größenänderung des Viewports reicht zur Erstellung von horizontalen Raum, der genug, um ein (oder mehrere) Spalte(N) in der Zeile. Denken Sie daran, dass diese zwei Zeilen sind identisch, und haben genau die gleichen Inhalte-und Spaltennummer. Der einzige Unterschied in dieser demo ist, dass ich mit auto-fill für die erste und auto-fit für die zweite.

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

auto-fill-Verhalten: “füllen Sie diese Zeile nach oben! Fügen Sie so viele Spalten, wie Sie können. I dont care, wenn Sie leer sind — Sie sollten alle noch zeigen. Wenn Sie genug Platz haben, um eine Spalte hinzuzufügen, fügen Sie es hinzu. Ist mir egal, wenn es leer ist oder nicht, es ist noch zu besetzen Speicherplatz in der Zeile, als ob es gefüllt waren (wie in: gefüllt mit Inhalt/grid Elemente).”

Während auto-fill füllt die Zeile so viele Spalten, wie es möglich ist, auch wenn diese Spalten leer sind, auto-fit, verhält sich ein wenig anders.
auto-fit bietet, zu füllen die Zeile mit mehrere Spalten sind die viewport-Breite erhöht, aber der einzige Unterschied ist, dass die neu hinzugefügten Spalten (jede Spalte Lücken, die mit Ihnen verbunden sind) sind zusammengebrochen. Der Grid-inspector ist ein fantastischer Weg, um diese sichtbar zu machen. Sie werden bemerken, dass die Spalten Hinzugefügt werden, wenn Sie halten Sie Ihr Auge auf der Linie zahlen, die sich erhöhen, wie die viewport-Breite erhöht.

auto-fit-Verhalten: “was immer Spalten, die Sie haben, passen in den verfügbaren Platz ein. Erweitern Sie so viel wie Sie müssen passen Sie die Zeile Größe. Leere Spalten müssen keinen Platz. Setzen, dass der Raum besser zu nutzen durch den ausbau der gefüllten (z.B.: gefüllt mit Inhalt/grid Elemente) Spalten passen sich die verfügbaren Zeile Platz.”

Ein nützlicher Tipp zu erinnern ist hier, dass die zusätzlichen Spalten in beiden Fällen (ob reduziert oder nicht) sind nicht implizit Spalten — das hat Besondere Bedeutung in der spec. In unserem Fall, wir sind das hinzufügen/erstellen von Spalten in der expliziten Gitter in der gleichen Weise, wie wenn wir erklärten, Sie wollten 12 Spalten, zum Beispiel. So Spalte die Zahl -1 wird die Arbeit zum Ziel die Ende dieses raster, die es nicht wenn Sie Spalten erstellen, in der implizite raster. Requisiten, um 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 bemerkbar, wenn die Zeile ist breit genug, um zu passen mehr Spalten.

Wenn Sie mit den auto-Sitz, der Inhalt wird gestreckt, um füllen Sie die gesamte Zeile Breite. In der Erwägung, dass mit auto-fill, die browser erlauben, in leere Spalten zu besetzen Platz in der Reihe wie Ihre nicht-leeren Nachbarn — Sie zugewiesen werden, einen Bruchteil des Platzes, auch wenn Sie kein raster Elemente in Ihnen, was sich auf die Größe/Breite des letzteren.

Das Verhalten, das Sie möchten oder es vorziehen, ist völlig bis zu Ihnen. Ich habe noch zu denken, ein Anwendungsfall, in dem auto-fill-würde mehr Sinn machen als auto-fit. Haben Sie Anwendungsfälle? Wenn Sie das tun, bitte fühlen Sie sich frei zu teilen Sie in den Kommentaren unten.