Heim  >  Artikel  >  Web-Frontend  >  Wie erreicht man einen Rasterumbruch in CSS ohne Medienabfragen?

Wie erreicht man einen Rasterumbruch in CSS ohne Medienabfragen?

Linda Hamilton
Linda HamiltonOriginal
2024-11-10 18:00:05244Durchsuche

How to achieve grid wrapping in CSS without media queries?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn