minmax()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Die minmax() CSS-Funktion definiert einen Größenbereich, der größer oder gleich min und kleiner oder gleich max ist. Sie wird mit CSS-Grids verwendet.

Probieren Sie es aus

Syntax

css
/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)

Eine Funktion, die zwei Parameter annimmt, min und max.

Jeder Parameter kann eine <length>, ein <percentage>, ein <flex>-Wert oder einer der Schlüsselwortwerte max-content, min-content oder auto sein.

Wenn max < min ist, wird max ignoriert und minmax(min,max) wird als min behandelt. Als Maximum setzt ein <flex>-Wert den Flexfaktor einer Grid-Spur; es ist als Minimum ungültig.

Werte

<length>

Eine nicht-negative Länge.

<percentage>

Ein nicht-negativer Prozentsatz, relativ zur Inline-Größe des Grid-Containers in Spalten-Grid-Spuren und zur Blockgröße des Grid-Containers in Zeilen-Grid-Spuren. Wenn die Größe des Grid-Containers von der Größe seiner Spuren abhängt, muss das <percentage> als auto behandelt werden. Der User-Agent kann die intrinsischen Größe-Beteiligungen der Spur an die Größe des Grid-Containers anpassen und die endgültige Größe der Spur um den kleinsten Betrag erhöhen, der zur Einhaltung des Prozentsatzes erforderlich ist.

<flex>

Eine nicht-negative Dimension mit der Einheit fr, die den Flexfaktor der Spur angibt. Jede <flex>-große Spur nimmt einen Anteil des verbleibenden Raums proportional zu ihrem Flexfaktor ein.

max-content

Stellt den größten max-content-Beitrag der Grid-Elemente dar, die die Grid-Spur besetzen.

min-content

Stellt den größten min-content-Beitrag der Grid-Elemente dar, die die Grid-Spur besetzen.

auto

Als min repräsentiert es die größte Mindestgröße (wie durch min-width/min-height vorgegeben) der Grid-Elemente, die die Grid-Spur besetzen. Als max ist es identisch mit max-content. Im Gegensatz zu max-content erlaubt es jedoch die Erweiterung der Spur durch die Werte der Eigenschaften align-content und justify-content wie normal und stretch.

Formale Syntax

<minmax()> = 
minmax( min , max )

CSS-Eigenschaften

Die minmax()-Funktion kann verwendet werden in:

Beispiele

CSS

css
#container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

HTML

html
<div id="container">
  <div>Item as wide as the content, but at most 300 pixels.</div>
  <div>Item with flexible width but a minimum of 200 pixels.</div>
  <div>Inflexible item of 150 pixels width.</div>
</div>

Ergebnis

Spezifikationen

Specification
CSS Grid Layout Module Level 2
# funcdef-grid-template-columns-minmax

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
minmax()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch