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, min und max, aufnimmt.

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, dann wird max ignoriert und minmax(min,max) wird als min behandelt. Als Maximum legt ein <flex>-Wert den Flexfaktor eines Rastertracks fest; es ist als Minimum ungültig.

Werte

<length>

Eine nicht-negative Länge.

<percentage>

Ein nicht-negativer Prozentsatz relativ zur Inline-Größe des Rastercontainers in Spalten-Rastertracks und der Blockgröße des Rastercontainers in Zeilen-Rastertracks. Wenn die Größe des Rastercontainers von der Größe seiner Tracks abhängt, muss das <percentage> als auto behandelt werden. Der User-Agent kann die intrinsischen Größenbeiträge des Tracks an die Größe des Rastercontainers anpassen und die endgültige Größe des Tracks um den minimalen Betrag erhöhen, der erforderlich wäre, um den Prozentsatz zu berücksichtigen.

<flex>

Eine nicht-negative Dimension mit der Einheit fr, die den Flexfaktor des Tracks angibt. Jeder <flex>-Track erhält einen Anteil des verbleibenden Platzes proportional zu seinem Flexfaktor.

max-content

Repräsentiert den größten max-content-Beitrag der Rasterelemente, die den Rastertrack einnehmen.

min-content

Repräsentiert den größten min-content-Beitrag der Rasterelemente, die den Rastertrack einnehmen.

auto

Als min repräsentiert es die größte Mindestgröße (wie angegeben durch min-width/min-height) der Rasterelemente, die den Rastertrack einnehmen. Als max ist es identisch mit max-content. Im Gegensatz zu max-content erlaubt es jedoch die Erweiterung des Tracks 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 innerhalb verwendet werden:

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