Kann CSS Grid Wrapping ohne Medienabfragen erreicht werden?

CSS-Rasterumbruch mit automatischer Füllung oder automatischer Anpassung

Kann ein CSS-Rasterumbruch erreicht werden, ohne auf Medienabfragen zurückgreifen zu müssen? Diese Abfrage ergibt sich aus der Anforderung, nicht deterministische Elemente mit einem gewünschten Umbruchverhalten in einem Raster zu platzieren. Die Nachteile von Flexbox bei der Sicherstellung des richtigen Abstands machen dies zu einer weniger praktikablen Option.

Beispielcode:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

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

Auto-Fill vs. Auto-Fit

Die Lösung liegt in der Verwendung von beidem Auto-Fill oder Auto-Fit als erster Parameter in der Notation „repeat()“.

Auto-Fill

Bei Angabe von Auto-Fill als Wiederholungsnummer wird die Die Anzahl der Wiederholungen wird angepasst, um zu verhindern, dass das Gitter den Gitterbehälter überfüllt.

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

Das obige ist der detaillierte Inhalt vonKann CSS Grid Wrapping ohne Medienabfragen erreicht werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!