Wie definiere ich eine maximale Spaltenanzahl im CSS-Raster ohne Medienabfragen?

CSS-Raster: Definieren der maximalen Spaltenanzahl ohne Medienabfragen

Im CSS-Raster können Sie eine maximale Anzahl von Spalten für ein Raster angeben und gleichzeitig zulassen, dass Elemente in neue umgebrochen werden Zeilen, wenn sich die Bildschirmbreite ändert. Um dies zu erreichen, sollten Sie die Funktion max(width, 100 %/N) verwenden, wobei N die maximale Anzahl von Spalten darstellt.

Die Funktion max stellt sicher, dass bei zunehmender Breite des Containers immer 100 %/N verwendet wird größer sein als die Breite. Dadurch wird sichergestellt, dass es nie mehr als N Elemente pro Zeile gibt.

Hier ist ein Beispiel:

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

.grid-item {
  /* Styling for grid items */
}

In diesem Beispiel wird die maximale Anzahl von Spalten mithilfe des -- auf 4 festgelegt. n benutzerdefinierte Eigenschaft. Die Eigenschaft „grid-template-columns“ verwendet das automatische Ausfüllen zum Erstellen von Spalten und wendet die Max-Funktion an, um die angegebene maximale Spaltenanzahl sicherzustellen.

Sie können den Wert --n anpassen, um die maximale Anzahl von Spalten nach Bedarf zu ändern . Dies bietet eine generische Lösung für Ihre Anforderungen, ohne auf JavaScript oder Medienabfragen angewiesen zu sein.

Das obige ist der detaillierte Inhalt vonWie definiere ich eine maximale Spaltenanzahl im CSS-Raster ohne Medienabfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!