Wie kann ich die maximale Anzahl von Spalten im CSS-Raster ohne Medienabfragen begrenzen?

CSS Grid: Angeben einer maximalen Anzahl von Spalten ohne Medienabfragen

CSS Grid bietet einen leistungsstarken Ansatz für das Layout von Webelementen, aber manchmal müssen Sie möglicherweise ein Maximum angeben Anzahl der Spalten in Ihrem Raster, während Elemente dennoch in neue Zeilen umgebrochen werden können, wenn sich die Bildschirmbreite ändert.

Um dies ohne Medienabfragen oder JavaScript zu erreichen, sollten Sie die Verwendung des folgenden CSS in Betracht ziehen Regel:

grid-template-columns: repeat(auto-fill, minmax(max(width, 100%/N), 1fr));

Hier stellt N die maximale Anzahl von Spalten dar, auf die Sie Ihr Raster beschränken möchten.

Der Anteil max(width, 100%/N) stellt sicher, dass jede Spalte dies tut haben eine Mindestbreite von entweder der Breite des Containers oder 100 %/N (je nachdem, welcher Wert größer ist). Diese Konfiguration begrenzt effektiv die Anzahl der Spalten auf N, während Elemente bei Bedarf in neue Zeilen umgebrochen werden können.

Zum Beispiel:

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

Dieses CSS erstellt ein Raster mit maximal 4 Spalten, wobei jede Spalte eine Mindestbreite von entweder 200 Pixel oder 25 % der Breite des Containers hat.

Sie können den Wert --n anpassen, um die maximale Anzahl zu ändern Spalten nach Bedarf.

Diese Lösung bietet einen flexiblen und anpassbaren Ansatz zum Erstellen von Rastern mit einer begrenzten Anzahl von Spalten und behält gleichzeitig die Reaktionsfähigkeit über verschiedene Bildschirmgrößen bei.

Das obige ist der detaillierte Inhalt vonWie kann ich die maximale Anzahl von Spalten im CSS-Raster ohne Medienabfragen begrenzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!