References

Beginner-friendly references for web development, with live, editable examples.

The CSS minmax() function

Function CSS All modern browsers Updated
Quick answer

The CSS minmax(MIN, MAX) function defines a grid track that is at least MIN and at most MAX, e.g. minmax(200px, 1fr). It is the key to responsive grids: paired with repeat(auto-fit, ...), it makes columns that are never narrower than 200px but stretch to share the row.

Overview

minmax() is used inside a grid template to give a track both a lower and an upper size bound. minmax(200px, 1fr) means "at least 200px, but grow to fill a fraction of the free space if there is room." On its own it is useful; combined with repeat() it is transformative.

The pattern worth committing to memory is repeat(auto-fit, minmax(200px, 1fr)). It tells the grid to fit as many columns as it can, each at least 200px wide, and let them stretch to fill the row. The result is a card grid that reflows from four columns to one as the screen narrows — fully responsive, with no media queries.

The 1fr maximum is what lets the tracks grow to share leftover space; swap it for a fixed value and the tracks stop at that size instead. minmax() works for rows too, via grid-template-rows, whenever a row needs a guaranteed minimum height that can still expand.

Syntax

/* responsive card grid, no media query */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Example

Live example 
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    font: 600 14px system-ui, sans-serif;
    text-align: center;
  }
  .grid div { background: #1c7ce9; color: #fff; padding: 20px 8px; border-radius: 8px; }
</style>
<div class="grid">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>

Best practices

  • Pair it with repeat(auto-fit, ...) for grids that reflow on their own as the screen changes.
  • Use 1fr as the maximum so tracks grow to share the free space.
  • The minimum sets the point at which columns wrap, so choose it based on your content's comfortable width.
  • It works for rows as well as columns — give a row a minimum height that can still expand with content.

Frequently asked questions

What does minmax() do in CSS grid?
It defines a grid track with a minimum and a maximum size, e.g. minmax(200px, 1fr) — at least 200px, growing to share the free space.
How do I make a responsive grid with minmax()?
Use grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). The grid fits as many 200px-minimum columns as it can and reflows automatically.
What does 1fr mean in minmax()?
As the maximum, 1fr lets the track grow to take a fraction of the leftover space, so columns stretch to fill the row.
Can minmax() be used for grid rows?
Yes. In grid-template-rows it gives a row a minimum height that can still expand to fit its content.
min() repeat()