CSS Grid Layout: The Minmax Function

CSS Grid Layout makes it easy to create grid tracks that have a size value between a certain range with the CSS minmax function.

Let’s say you want a column to be between 200px and 500px and then a 1fr column:

.container {
  display: grid;
  grid-template-columns: minmax(200px, 500px) 1fr;

The value for min has to be smaller than the value for max. Fr units can’t be used for the min value, but they can absolutely be used for the max value. In fact, using a 1fr as the max value will ensure that the track expands and takes up the available space:

.container {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 1fr;
  grid-template-rows: 100px 100px;

Used like that, minmax allows to create grid tracks that flex to the available space, but that don’t shrink narrower than a specified size.

Here’s the resulting grid from the above snippet. If you can resize your browser, you’ll notice how the 1st column doesn’t shrink to less than 250px.

For browser with no grid layout support, this demo will use this polyfill, which doesn't support minmax yet. Enable Grid Layout in your browser to properly view the demo.

Item 1
Item 2
Item 3
Item 4

👉 You can also use the auto, min-content and max-content keywords as the min or max values.


🔎 Searching...