CSS minmax() Function

Definition and Usage

CSS 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

Using 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)

Technical Details

Browser Support

The numbers in the table indicate the browser version that first fully supports this function.

Páginas relacionadas

Referencia:Función min() de CSS

Referencia:Función max() de CSS

Referencia:Atributo CSS grid-template-columns

Referencia:Atributo CSS grid-template-rows

Referencia:Atributo grid-auto-columns de CSS

Referencia:Atributo grid-auto-rows de CSS