minmax()

Baseline Widely available

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

Dieminmax()CSS-Funktion definiert einen Größenbereich, der größer oder gleichmin und kleiner oder gleichmax ist. Sie wird mitCSS-Grids verwendet.

Probieren Sie es aus

grid-template-columns: minmax(20px, auto) 1fr 1fr;

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);

grid-template-columns: minmax(2ch, 10ch) 1fr 1fr;

<section>  <div>    <div>      <div>One. This column has more text in it.</div>      <div>Two</div>      <div>Three</div>      <div>Four</div>      <div>Five</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-gap: 10px;  width: 250px;}#example-element > div {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;  text-align: left;}

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 undmax, annimmt.

Jeder Parameter kann eine<length>, ein<percentage> oder einer der Schlüsselwortwertemax-content,min-content oderauto sein.

Der zweite Parametermax akzeptiert auch<flex>-Werte. (diesefr-Einheiten können nur fürmax verwendet werden und sind fürmin ungültig.)

Wennmax <min ist, wirdmax ignoriert undminmax(min,max) wird wiemin behandelt.

Werte

<length>: Eine nicht-negative Länge.
<percentage>: Ein nicht-negative Prozentsatz relativ zur Inline-Größe des Grid-Containers in Spalten-Grid-Tracks und zur Block-Größe des Grid-Containers in Zeilen-Grid-Tracks. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, muss das<percentage> alsauto behandelt werden. DerUser-Agent kann die intrinsischen Größenbeiträge des Tracks zur Größe des Grid-Containers anpassen und die endgültige Größe des Tracks um den Mindestbetrag erhöhen, der zur Einhaltung des Prozentsatzes erforderlich ist.
<flex>: Eine nicht-negative Dimension mit der Einheitfr, die den Flex-Faktor des Tracks angibt. Jeder<flex>-Track nimmt einen Anteil des verbleibenden Raums proportional zu seinem Flex-Faktor ein.
max-content: Repräsentiert den größten max-content Beitrag der Grid-Elemente, die den Grid-Track belegen.
min-content: Repräsentiert den größten min-content Beitrag der Grid-Elemente, die den Grid-Track belegen.
auto: Alsmin repräsentiert es die größte Mindestgröße (wie spezifiziert durchmin-width/min-height) der Grid-Elemente, die den Grid-Track belegen.Alsmax ist es identisch mitmax-content. Im Gegensatz zumax-content erlaubt es jedoch die Erweiterung des Tracks durch die Werte der Eigenschaftenalign-content undjustify-content wienormal undstretch.

Formale Syntax

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

#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>  <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>