CSS/Funktionen/minmax()

Browserunterstützung
caniuse.com

Die CSS-Funktion minmax() definiert einen Größenbereich, der größer gleich eines (gegebenen) Minimalwerts und kleiner gleich eines Maximalwerts ist

anwendbar auf

Die Funktion wird in den CSS Grid Eigenschaften grid-auto-columns, grid-auto-rows, grid-template-columns und grid-template-rows verwendet.

Parameter

Syntax

minmax( min, max )

Die beiden Werte können aus folgenden Werten und Schlüsselwörtern bestehen:

• nicht-negative Längenangabe oder nicht-negativer Prozentwert
• <flex>: flexibler Bruchteil des Gesamtraums, ausgedrückt mit der Einheit fr
• max-content: zeigt den größten max-content Inhaltsbeitrag aller Rasterelemente an
• min-content: zeigt den größten min-content Inhaltsbeitrag aller Rasterelemente an
• auto: entspricht im Maximum max-content - als Minimum wird die größte Minimalgröße (as specified by min-width/min-height) der Rasterelemente verwendet

Beispiel

main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}

Für die 30 section-Blöcke werden mit grid-template-columns Spalten erzeugt. Dabei werden mit der repeat()-Funktion über das autofill-Schlüsselwort so oft wie nötig Spalten mit einer durch die minmax(20em, 1fr)-Funktion ermittelten Breite von mindestens 20em Breite und maximal einem Bruchteil erzeugt.

Siehe auch

• CSS/Tutorials/Grid/responsive Raster ohne Media Queries#Responsives Grid

Weblinks

• CSSWG.org: minmax(min, max)
• MDN: minmax()

• Hongkiat: CSS Grid Layout: How to Use minmax() von Anna Monus
• Browser-Support: caniuse.com