Ein automatisches CSS-Gitter mit maximalen Säulen mit einer Mindestgröße

Drupal 10 führt eine neuartige CSS-Gittertechnik für automatische Fülle ein, und wir freuen uns, sie zu teilen.

Die Schlüsselmerkmale sind:

• Anpassbare maximale Spaltenanzahl und Definieren des Standardzustands des Netzes.
• Dynamische Säulenanpassung: Wenn eine Gitterzelle unter eine angegebene Mindestbreite fällt, reduziert das Gitter automatisch die Säulenzahl.
• Nutzung der vollen Breite: Gitterzellen erweitern sich immer, um die Breite des Behälters unabhängig von der Säulenummer zu füllen.
• JavaScript-freies, reaktionsschnelles Design: Arbeitet in verschiedenen Ansichtsfenster ohne JavaScript.

Automatisches Gitter in Aktion

Beachten Sie, wie das Netz reagiert, wenn sie durch das draggierbare Element nach links komprimiert werden.

Der Code

Bereit zu implementieren? Hier ist das CSS:

 .Grid-container {
  / * Benutzerdefinierte Werte */
  -GRID-LAYOUT-GAP: 10PX;
  -GRID-SOLUMN-COUNT: 4;
  -Grid-item-min-width: 100px;

  / * Berechnete Werte */
  -GAP-Count: Calc (var (-Grid-Säulen-Count)-1);
  -Total-Gap-Width: Calc (var (-Gap-Count) * var (-Grid-Layout-Gap));
  -Grid-item-Max-Breite: CALC ((100%-var (-Gesamtverbindungsbreite)) / var (-Raster-Säulen-Count));

  Anzeige: Grid;
  Grid-Template-Säulen: Wiederholung (Auto-Fill, Minmax (max (var (-grid-item-min-width), var (-grid-item-max-width), 1fr));
  Raster-Lack: var (-Grid-Layout-Gap);
}

Verständnis des automatischen Gitters

Dieser Code nutzt moderne CSS-Funktionen: CSS Grid's repeat() , auto-fill() und minmax() sowie max() und calc() .

auto-fill() erklärt

auto-fill() ist entscheidend, um Zeilen mit Spalten dynamisch zu füllen. Für einen tieferen Eintauchen in auto-fill() gegen auto-fit() siehe Sara Soueidans ausgezeichneter Artikel und begleitendes Video.

Spaltengrenzen mit max() verwalten

Die max() -Funktion verhindert übermäßige Spalten. Es stellt sicher, dass die Breite jeder Netzzelle einen berechneten Prozentsatz nicht überschreitet, während die Mindestbreite beibehält. Die Berechnung macht Grid -Lücken aus:

 max (calc (25% -<grid-gap-for-one-cell> ), 100px)</grid-gap-for-one-cell>

Dies wird unter Verwendung von CSS -Variablen erreicht:

 -GAP-Count: Calc (var (-Grid-Säulen-Count)-1);
-Total-Gap-Width: Calc (var (-Gap-Count) * var (-Grid-Layout-Gap));
-Grid-item-Max-Breite: CALC ((100%-var (-Gesamtverbindungsbreite)) / var (-Raster-Säulen-Count));

Dies berechnet die maximale Breite dynamisch unter Berücksichtigung der Anzahl der Spalten und Lücken.

Gewährleistung der vollen Breite mit minmax()

minmax() garantiert, dass Gitterzellen immer dehnen, um die Behälterbreite zu füllen. Es legt eine minimale Breite fest und ermöglicht die Ausdehnung von 1fr (Brucheinheit), wenn der Platz zulässt:

 Minmax (<grid-item-width> , 1fr)</grid-item-width>

Die vollständige Lösung

Durch die Kombination dieser Elemente erreicht der endgültige Code das gewünschte automatische Füllenverhalten:

 -GAP-Count: Calc (var (-Grid-Säulen-Count)-1);
-Total-Gap-Width: Calc (var (-Gap-Count) * var (-Grid-Layout-Gap));
-Grid-item-Max-Breite: CALC ((100%-var (-Gesamtverbindungsbreite)) / var (-Raster-Säulen-Count));

Grid-Template-Säulen: Wiederholung (Auto-Fill, Minmax (max (var (-grid-item-min-width), var (-grid-item-max-width), 1fr));

Die Kraft von CSS

Dieses Beispiel zeigt die fortschrittlichen Fähigkeiten moderner CSS. Wir haben ein komplexes Layout ohne JavaScript erstellt, das die Entwicklung von CSS demonstriert.

Vielen Dank an Andy Blum für den Vorschlag auto-fill() und die CSS-Spezifikationsautoren und -implementierer zu verwenden, um dies zu ermöglichen.

Das obige ist der detaillierte Inhalt vonEin automatisches CSS-Gitter mit maximalen Säulen mit einer Mindestgröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!