Wie erreicht man einen Rasterumbruch in CSS ohne Medienabfragen?

Rasterumbruch mit CSS und Auto-Fill

Rasterumbruch in CSS zu erreichen, ohne auf Medienabfragen angewiesen zu sein, ist durch die Verwendung von Auto-Fill möglich. Füllen Sie die Notation „repeat()“ aus. Der Codeausschnitt in der ursprünglichen Frage zeigt ein Raster mit expliziten Spaltenbreiten, aber damit Elemente ihre eigenen Breiten definieren können, können wir es wie folgt ändern:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, min-content);
}

.grid > * {
  background-color: green;
  height: 200px;
}

Auto-Fill

Auto-Fill, wie in der CSS-Grid-Layout-Spezifikation definiert, stellt sicher, dass die Anzahl der Wiederholungen in der Repeat()-Notation den größtmöglichen Wert hat, ohne dass das Grid seinen Container überläuft. Dadurch kann das Raster die Anzahl der Spalten basierend auf der Breite seiner Elemente dynamisch anpassen.

In unserem Fall geben wir die automatische Ausfüllung als Wiederholungszahl und den Mindestinhalt als feste Größe für jede Spalte an. Min-Content stellt sicher, dass die Größe jeder Spalte an ihren Inhalt angepasst ist, sodass die Elemente ihre eigene Breite bestimmen können.

Das Ergebnis ist ein Raster, das seine Elemente ohne die Notwendigkeit von Medienabfragen umschließt und sie effektiv in einem guten Abstand verteilt auch bei einer nicht deterministischen Anzahl von Elementen.

Das obige ist der detaillierte Inhalt vonWie erreicht man einen Rasterumbruch in CSS ohne Medienabfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!