CSS minmax() Function

Definition and Usage

CSS's minmax() The function is used for CSS grid layout and defines a size range that is greater than or equal to the minimum value and less than or equal to the maximum value.

Example

Use minmax() Define size ranges for grid columns:

.grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 350px) minmax(150px, 1fr) 120px;
  grid-gap: 5px;
  height: 150px;
  background-color: green;
  padding: 10px;
}

Try It Yourself

CSS Syntax

minmax(min, max)
Value Description
min

Required. Minimum value.

It can be one of the following: length, percentage, flexible value (fr), or one of the following keywords:

  • auto
  • max-content
  • min-content
max

Required. Maximum value.

It can be one of the following: length, percentage, flexible value (fr), or one of the following keywords:

  • auto
  • max-content
  • min-content

Technical Details

Version: CSS Grid Layout Module Level 2

Browser Support

The numbers in the table indicate the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
59 16 52 10.1 44

Related Pages

Reference:CSS min() function

Reference:CSS max() function

Reference:CSS grid-template-columns property

Reference:CSS grid-template-rows property

Reference:CSS grid-auto-columns attribute

Reference:CSS grid-auto-rows attribute