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

BCD tables only load in the browser

Siehe auch