Auto-Fill vs. Auto-Fit im CSS-Raster: Was ist der Unterschied?

Den Unterschied zwischen automatischer Füllung und automatischer Anpassung in Rasterlayouts verstehen

Bei der Arbeit mit CSS-Rastern stoßen Sie häufig auf die Begriffe „ „Auto-Fill“ und „Auto-Fit“ im Zusammenhang mit der Erstellung eines kartenbasierten Rasterlayouts. Diese Eigenschaften bestimmen, wie das Raster mit Szenarien umgeht, in denen die verfügbaren Elemente den verfügbaren Platz möglicherweise nicht vollständig ausfüllen.

Auto-Fill vs. Auto-Fit

Beide Auto-Fill und „Auto-Fit“ erstellen die angegebene Anzahl von Rasterspuren (Spalten oder Zeilen), ihr Verhalten unterscheidet sich jedoch, wenn die verfügbaren Elemente nicht ausreichen, um alle zu füllen Spuren.

• Auto-Fit: Wenn nicht genügend Elemente vorhanden sind, um alle Spuren zu füllen, werden die leeren Spuren reduziert und die vorhandenen Elemente werden erweitert, um den frei gewordenen Platz zu füllen.
• Automatisches Ausfüllen: Im Gegensatz zum automatischen Ausfüllen bleiben leere Spuren beim automatischen Ausfüllen erhalten, was zu einem festen Rasterlayout führt, unabhängig von der Anzahl Elemente.

Auswirkungen auf die Kartenanzeige

In Ihrem Kartenrasterlayout stellt die Verwendung von „Auto-Fill“ statt „Auto-Fit“ sicher, dass die Karten so angezeigt bleiben getrennte Einheiten, auch wenn es nur wenige davon gibt. Durch die Beibehaltung der festen Rasterstruktur ermöglicht das automatische Ausfüllen eine gleichmäßige Verteilung und klare Trennung Ihrer Karten.

Beispiel

Bedenken Sie den folgenden Code:

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

Beim automatischen Ausfüllen erstellt der Rastercontainer so viele Spalten wie möglich, ohne dass der Wrapper überläuft, unabhängig davon, ob genügend Karten vorhanden sind, um alle Spalten zu füllen. Die vorhandenen Karten werden gleichmäßig verteilt und unabhängig voneinander angezeigt, wobei das Kartenlayout erhalten bleibt.

Fazit

Die Wahl zwischen automatischem Ausfüllen und automatischer Anpassung hängt vom gewünschten Verhalten ab Szenarien mit unterschiedlicher Artikelanzahl. Das automatische Ausfüllen wird bevorzugt, um eine konsistente Rasterstruktur beizubehalten, während beim automatischen Anpassen leere Spuren ausgeblendet werden, damit Elemente erweitert werden und den verfügbaren Platz füllen können.

Das obige ist der detaillierte Inhalt vonAuto-Fill vs. Auto-Fit im CSS-Raster: Was ist der Unterschied?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!