CSS minmax() Function

CSS minmax() Function

The CSS minmax() function defines a minimum and maximum size for a CSS Grid row or column track.

It is used with grid track sizing properties such as grid-template-columns, grid-template-rows, and grid-auto-columns. The function allows tracks to grow and shrink within specified limits, making it useful for responsive layouts and flexible grid structures.

Syntax

minmax(minimum, maximum)

The function requires exactly two comma-separated arguments.

For example:

grid-template-columns: minmax(200px, 1fr);
grid-template-columns: repeat(3, minmax(150px, 1fr));
grid-template-rows: minmax(100px, auto);

The first argument defines the minimum track size. The second argument defines the maximum track size.

The function returns a CSS <track-size> value, not a general-purpose number or length.

It is specifically intended for CSS Grid track sizing.

For example:

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

The first column has a minimum size of 200 pixels and can grow using available grid space. The second column has a fixed width of 150 pixels.

Parameters

The minmax() function accepts two track sizing values.

For example:

minmax(150px, 300px)

The track can be sized between 150 and 300 pixels, depending on the grid's available space and sizing rules.

Another example:

minmax(200px, 1fr)

The track has a minimum of 200 pixels and can grow by receiving a share of the available space.

A flexible fr value is permitted as the maximum argument but not as the minimum argument.

Both arguments must use valid grid track sizing values.

How It Works

CSS Grid calculates track sizes based on the available space, the track sizing functions, and the grid items' content.

The minmax() function provides a minimum and maximum sizing boundary for a track.

For example:

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

The first column has a minimum size of 200 pixels and a maximum sizing limit of 400 pixels.

The second column receives a flexible share of the available space.

Another example:

.grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
}

Both columns have a minimum track size of 150 pixels and can expand to share available space.

If the grid container becomes too narrow to accommodate both minimum sizes and the column gap, the tracks may overflow.

The function does not automatically remove columns or change the number of tracks. For responsive column counts, it is commonly combined with repeat(), auto-fit, or auto-fill.

Minimum Track Sizes

The first argument defines the minimum sizing requirement for a grid track.

For example:

.grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 1fr;
}

The first column has a minimum size of 180 pixels.

Another example uses an intrinsic minimum:

.grid {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr);
}

The min-content keyword uses the track's minimum intrinsic sizing contribution.

The auto keyword can also be used:

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

The automatic minimum is determined by the grid track sizing rules and the items it contains.

The minimum argument cannot be a flexible track sizing value such as 1fr.

For example, the following is invalid:

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

Maximum Track Sizes

The second argument defines the maximum track sizing function.

For example:

.grid {
  display: grid;
  grid-template-columns: minmax(150px, 350px);
}

The track has a minimum size of 150 pixels and a maximum sizing limit of 350 pixels.

Another example:

grid-template-columns: minmax(150px, max-content);

The max-content keyword allows the track to grow according to the maximum intrinsic sizing contribution of its contents.

A flexible maximum can also be used:

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

In this case, the maximum is not a fixed pixel limit. The fr unit allows the track to expand according to the grid's available space and flexible track sizing rules.

The auto keyword is another option:

grid-template-columns: minmax(150px, auto);

An automatic maximum is determined by grid sizing rules and may stretch when additional space is available.

Using Fractional Units

The fr unit represents a fraction of the available space in a CSS Grid container.

It is commonly used as the maximum argument of minmax().

For example:

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 15px;
}

This creates three columns, each with a minimum size of 150 pixels and a flexible maximum of 1fr.

When sufficient space is available, the three columns share it equally.

Different fractional values can also be used:

.grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 2fr);
}

When the flexible sizing calculation has sufficient room and the minimum sizes do not control the result, the second column receives twice the fractional share of the first.

Fractional units are not valid as the minimum argument:

/* Invalid */
grid-template-columns: minmax(1fr, 2fr);

Use a length, percentage, or supported intrinsic sizing keyword for the minimum argument.

Using auto-fill and auto-fit

The minmax() function is frequently combined with repeat() and the auto-fill or auto-fit keywords.

For example:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
}

The browser creates as many columns as can fit while respecting the 180-pixel minimum track size.

As the grid container becomes narrower, fewer columns fit, and items move to additional rows.

With auto-fit, empty repeated tracks collapse, allowing occupied tracks to expand into the available space.

With auto-fill, empty tracks are retained:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}

This can leave space reserved for additional grid items.

For both keywords, the minimum track size helps determine how many repeated tracks can fit.

Using auto-fit with minmax() is a common technique for responsive card layouts without media queries.

Sizing Grid Rows

The minmax() function can also define minimum and maximum row sizes.

For example:

.grid {
  display: grid;
  grid-template-rows: minmax(100px, auto) minmax(150px, 1fr);
}

The first row has a minimum size of 100 pixels and can grow according to its content and grid sizing rules.

The second row has a minimum size of 150 pixels and can receive a flexible share of available space.

Another example uses automatically created rows:

.grid {
  display: grid;
  grid-auto-rows: minmax(120px, auto);
}

Each implicit row has a minimum size of 120 pixels and can grow to accommodate content.

This is useful when grid items contain different amounts of text or other content.

Flexible row sizing depends on the available block-axis space. In an auto-sized grid container, a fractional row may behave differently than it would in a container with a definite height.

Intrinsic Sizing Keywords

The minmax() function supports intrinsic track sizing keywords.

For example:

grid-template-columns: minmax(min-content, max-content);

The track can size between its minimum and maximum intrinsic contributions.

Another example:

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

The track uses an automatic minimum and a flexible maximum.

Intrinsic sizing is useful when a track must respond to the dimensions of its contents rather than only fixed measurements.

The exact track size also depends on available space, neighboring tracks, and the grid sizing algorithm.

When Minimum Exceeds Maximum

If the maximum argument is smaller than the minimum argument, CSS Grid treats the maximum as equal to the minimum.

For example:

grid-template-columns: minmax(300px, 200px);

The maximum value is smaller than the minimum, so the track is effectively sized as:

grid-template-columns: minmax(300px, 300px);

This does not make the declaration invalid.

However, it removes the intended flexibility between the two limits.

For predictable sizing, specify a maximum that is equal to or greater than the minimum when using comparable fixed lengths.

minmax() vs. min() and max()

The minmax(), min(), and max() functions have different purposes.

For example, minmax() is used in CSS Grid:

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

By comparison, min() can calculate an element's width:

.box {
  width: min(600px, 90%);
}

The minmax() function is not a general-purpose mathematical function and cannot be used directly as a normal element width.

For example, the following is invalid:

width: minmax(200px, 500px);

Example

This example uses minmax() to create two flexible columns with different minimum sizes.

HTML:

<div class="minmax-demo">
  <div class="minmax-demo-item">Column 1</div>
  <div class="minmax-demo-item">Column 2</div>
</div>

CSS:

.minmax-demo {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(100px, 2fr);
  gap: 10px;
  padding: 15px;
  background-color: #f1f3f5;
}
.minmax-demo-item {
  padding: 20px 10px;
  background-color: #0066cc;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
}

The first column has a minimum size of 120 pixels, while the second has a minimum size of 100 pixels.

When enough space is available, the 1fr and 2fr maximum values determine their flexible proportions.

When the container is narrower than the combined minimum track sizes and gap, the grid can overflow horizontally.

Responsive Grid Example

This example combines minmax() with repeat() and auto-fit to create a responsive grid without media queries.

HTML:

<div class="minmax-responsive-demo">
  <div class="minmax-responsive-item">Item 1</div>
  <div class="minmax-responsive-item">Item 2</div>
  <div class="minmax-responsive-item">Item 3</div>
  <div class="minmax-responsive-item">Item 4</div>
</div>

CSS:

.minmax-responsive-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 15px;
  background-color: #f1f3f5;
}
.minmax-responsive-item {
  padding: 25px 10px;
  background-color: #0066cc;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  border-radius: 3px;
}

Each column has a minimum track size of 140 pixels and can expand to fill available space.

As the container becomes narrower, the number of columns decreases automatically.

When there is room for only one column, the items stack vertically.

Resize the browser window to observe how the grid adjusts to the available width.

Common Uses

The minmax() function is useful when CSS Grid tracks need flexible sizing boundaries.

For example:

.layout {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: 20px;
}

The first column provides a sidebar between 180 and 250 pixels under normal track sizing conditions.

The second column uses the remaining flexible space and can shrink below its contents' intrinsic minimum when necessary.

Using minmax(0, 1fr) can help prevent long content from forcing a flexible grid track wider than the available space. The content itself may still need wrapping or overflow handling.

Limitations

The minmax() function has several important rules and limitations.

• Exactly two comma-separated arguments are required.
• The function is intended for CSS Grid track sizing, not general-purpose dimensions.
• A flexible fr value is allowed as the maximum argument but not as the minimum argument.
• The arguments must use valid track sizing values.
• If a fixed maximum is smaller than a fixed minimum, the maximum is treated as equal to the minimum.
• Tracks can overflow when the grid container is narrower than their combined minimum sizes.
• The function does not automatically change the number of columns.
• Percentage track sizes can depend on whether the grid container has a definite size.
• Intrinsic content sizes and the grid sizing algorithm can affect the final track dimensions.
• Flexible track sizing with fr depends on available space and neighboring tracks.

For example, this is valid:

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

The following is invalid because the minimum argument uses a flexible length:

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

The following is invalid because only one argument is supplied:

grid-template-columns: minmax(200px);

The following is invalid because minmax() is not a valid general-purpose width value:

width: minmax(200px, 500px);

Use min(), max(), or clamp() when calculating ordinary CSS property values outside grid track sizing.

Browser Support

The CSS minmax() function is Baseline Widely available and has been supported across major browser engines since the introduction of modern CSS Grid layouts in 2017.

Modern versions of Chrome, Edge, Firefox, Safari, and other major browsers support the function.

For example:

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

Very old browsers may not support modern CSS Grid syntax or its track sizing functions.

For current compatibility information, visit Can I Use? and search for CSS Grid Layout.

Specifications

The minmax() function is defined in the CSS Grid Layout Module Level 2 .

The specification defines track sizing functions, flexible lengths, intrinsic sizing, and the grid track sizing algorithm.

Related CSS functions include repeat(), fit-content(), min(), and max().