CSS/Funktionen/minmax()

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

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
anwendbar auf	Die Funktion wird in den CSS Grid Eigenschaften grid-auto-columns, grid-auto-rows, grid-template-columns und grid-template-rows verwendet.
Browsersupport	caniuse: mdn-css_properties_grid-template-rows_minmax

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.

Weblinks

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

• Hongkiat: CSS Grid Layout: How to Use minmax() von Anna Monus

Siehe auch

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