Wie erreicht man CSS Grid Wrapping ohne Medienabfragen?

Erzielen eines CSS-Rasterumbruchs ohne Medienabfragen

Im Bereich des CSS-Rasters kann es möglich sein, einen gewünschten Umbrucheffekt zu erzielen, ohne auf Medienabfragen zurückgreifen zu müssen eine gemeinsame Herausforderung. Lassen Sie uns in eine Lösung eintauchen, die die Notation „repeat()“ mit automatischer Ausfüllung verwendet, um dieses schwer fassbare Ziel zu erreichen.

Überarbeitung des Ansatzes mit „repeat(autofill)“

Anstatt die Breite der Rasterelemente explizit über „grid-template-columns“ anzugeben, können wir die Notation „repeat()“ mit automatischer Ausfüllung als Wiederholungszahl verwenden. Das automatische Ausfüllen berechnet dynamisch die maximale Anzahl von Spalten, die im Rastercontainer untergebracht werden können, ohne dass es zu einem Überlauf kommt.

Verdeutlichung des automatischen Ausfüllens

Die automatische Ausfüllen-Variante der Wiederholung () bestimmt die Anzahl der Wiederholungen nach folgendem Prinzip: Wenn der Rastercontainer eine vordefinierte oder maximale Größe in der relevanten Achse hat, entspricht die Anzahl der Spalten der höchsten positiven Ganzzahl, die das nicht verursacht Raster, um über seinen Container hinauszugehen.

Beispielimplementierung

Um die Leistungsfähigkeit des automatischen Ausfüllens zu demonstrieren, verbessern wir den ersten Codeausschnitt:

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

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

Mit dieser Anpassung passen unsere Rasterelemente ihre Breite dynamisch an den verfügbaren Platz an und brechen nahtlos in neue Zeilen ein benötigt.

Hinweis zur Flexibilität der Elementbreite

Darüber hinaus ermöglicht die automatische Ausfüllung den untergeordneten Elementen, ihre eigenen Breiten anzugeben, sodass keine fest codierten Breiten erforderlich sind. Dieser Ansatz erhöht die Flexibilität und Reaktionsfähigkeit des Rasterlayouts.

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