Wie kann ich eine maximale Anzahl von Spalten in einem CSS-Raster festlegen, ohne Medienabfragen zu verwenden?

Maximale Anzahl von Spalten im CSS-Raster ohne Medienabfragen

Maximale Spaltenanzahl des Rasters definieren

Ist es möglich, ein Raster mit einem festgelegten Maximum zu definieren? Anzahl der Spalten, während Elemente in neue Zeilen aufgeteilt werden können, wenn sich die Größe des Ansichtsfensters ändert? Standardmäßig ermöglichen Raster eine unendliche Erweiterung von Spalten, was auf schmaleren Bildschirmen zu unerwünschten Layouts führen kann.

Erzielen eines Rasters mit maximaler Spaltenanzahl

Um dies zu beheben, führt CSS Grid das Konzept der Verwendung ein max() innerhalb der Eigenschaft „grid-template-columns“. Die Funktion max() akzeptiert zwei Parameter: Der erste stellt die maximale Breite einer einzelnen Spalte dar und der zweite stellt sicher, dass jede Spalte innerhalb ihres übergeordneten Containers reagiert.

Implementierung

Bedenken Sie Folgendes Codeausschnitt:

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

Hier definiert --n die maximale Anzahl von Spalten. minmax() stellt sicher, dass jede Spalte eine Mindestbreite von 200 Pixeln hat, aber 100 %/var(--n) nicht überschreitet. Diese Formel garantiert, dass mit zunehmender Containerbreite die Spaltenbreite niemals 100 %/maximale_Anzahl_von_Spalten überschreitet, wodurch die Erstellung zusätzlicher Spalten verhindert wird.

Mit dieser Technik können Sie Raster mit einem responsiven Design erstellen, das sich an verschiedene Bildschirme anpasst Größen unter Beibehaltung der angegebenen maximalen Spaltenanzahl.

Das obige ist der detaillierte Inhalt vonWie kann ich eine maximale Anzahl von Spalten in einem CSS-Raster festlegen, ohne Medienabfragen zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!