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.

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