Wie umschließe ich CSS-Rasterelemente ohne Medienabfragen?

CSS-Rasterumbruch ohne Medienabfragen

Eine häufige Herausforderung beim CSS-Raster besteht darin, Elemente so zu verpacken, dass sie in den verfügbaren Platz passen. In Fällen, in denen Medienabfragen unerwünscht sind, müssen alternative Ansätze verwendet werden.

Die Lösung zum automatischen Ausfüllen

Erwägen Sie die Verwendung von Variante der Repeat()-Notation. Bei Angabe als Wiederholungszahl berechnet das automatische Ausfüllen automatisch die Anzahl der Wiederholungen, die in den verfügbaren Platz passen, ohne einen Überlauf zu verursachen.

Hier ein Beispiel:

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

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

Mit dem automatischen Ausfüllen wird Das Raster passt seine Spaltenanzahl basierend auf der verfügbaren Breite an, um sicherzustellen, dass die Elemente gut verpackt sind. Dadurch entfällt die Notwendigkeit, feste Spaltenbreiten anzugeben.

Das obige ist der detaillierte Inhalt vonWie umschließe ich CSS-Rasterelemente ohne Medienabfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!