Revision 1132725 of minmax()

<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>The <code><strong>minmax</strong></code><strong><code>()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> function defines a size range greater than or equal to <var>min</var> and less than or equal to <var>max</var>. If <var>max</var> &lt; <var>min</var>, then <var>max</var> is ignored and <code>minmax(min,max)</code> is treated as <var>min</var>. As a maximum, a {{cssxref("&lt;flex&gt;")}} value sets the flex factor of a grid track; it is invalid as a minimum.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">
/* &lt;inflexible-breadth&gt;, &lt;track-breadth&gt; 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)

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

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

<h3>Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Example">Example</h2>

<h3>CSS content</h3>

<pre class="brush: css">
#container {
  display: grid;
  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container &gt; div {
  background-color: #8ca0ff;
  padding: 5px;
}
</pre>

<h3>HTML content</h3>

<pre class="brush: html">
&lt;div id="container"&gt;
  &lt;div&gt;
    Item as wide as the content,&lt;br/&gt;
    but at most 300 pixels.
  &lt;/div&gt;
  &lt;div&gt;
    Item with flexible width but a minimum of 200 pixels.
  &lt;/div&gt;
  &lt;div&gt;
    Inflexible item of 150 pixels width.
  &lt;/div&gt;
&lt;/div&gt;</pre>

<h3>Result</h3>

<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
   <td>{{Spec2("CSS Grid")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatNo}}<sup>[3]</sup></td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Implemented behind the <em>experimental Web Platform features</em> flag in <code>chrome://flags</code>.</p>

<p>[2] Implemented behind the preference <code>layout.css.grid.enabled</code>, defaulting to <code>false</code>.</p>