CSS-Raster: Wie lege ich eine maximale Spaltenanzahl ohne Medienabfragen fest?

CSS-Raster: Definieren einer maximalen Anzahl von Spalten ohne Medienabfragen

Frage:

Können wir ein CSS-Raster mit einer maximalen Anzahl von Spalten angeben und gleichzeitig zulassen, dass Elemente entsprechend der Bildschirmbreite dynamisch in neue Zeilen umgebrochen werden? Änderungen?

Antwort:

Ja, mit CSS Grid können wir dies ohne den Einsatz von JavaScript oder Medienabfragen erreichen. Dieser Ansatz nutzt das Konzept der automatischen Anpassung von Spalten:

Lösung:

1. Erstellen Sie einen Rastercontainer mit der Eigenschaft display: Grid.
2. Legen Sie die Eigenschaft „grid-template-columns“ mithilfe der Funktion „repeat()“ mit „Auto-Fit“ als Wiederholungstyp fest.
3. Innerhalb Automatische Anpassung, verwenden Sie minmax(max(width, 100%/N), 1fr), um das Spaltenverhalten anzugeben.

Erklärung:

• max(width, 100 %/N) stellt sicher, dass die Spaltenbreite entweder der maximalen Breite oder einem Bruchteil (100 %/N) des Containers entspricht Breite.
• 1fr legt die Standardspaltenbreite auf einen Bruchteil des verbleibenden Platzes fest.

Wenn die Containerbreite vergrößert wird, werden die Spalten daher entsprechend erweitert verfügbaren Platz innerhalb der definierten maximalen Spaltenanzahl. Elemente werden bei Bedarf automatisch in neue Zeilen umgebrochen.

Code-Snippet:

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

Beispiel:

Im Im folgenden Beispiel wird ein Rastercontainer mit maximal 4 Spalten erstellt und die Elemente werden umbrochen entsprechend:

<div>

Mit diesem Ansatz können wir eine maximale Anzahl von Spalten in einem CSS-Raster definieren, sodass Elemente bei Änderungen der Bildschirmbreite in neue Zeilen umgebrochen werden können, ohne dass Medienabfragen erforderlich sind.

Das obige ist der detaillierte Inhalt vonCSS-Raster: Wie lege ich eine maximale Spaltenanzahl ohne Medienabfragen fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!