CSS/Funktionen/minmax()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Siehe auch