The Art of Writing Short Stories Read Here

minmax() Function

minmax() Function

The CSS Grid minmax() function accepts two parameters:

  • The first parameter is the minimum size of a row or column.
  • The second parameter is the maximum size.

The grid must have a variable width for the minmax() function.

If the maximum value is less than the minimum, then the maximum value is ignored and only the minimum value is used.

The function can be used in the values of the grid-template-rows, grid-template-columns and grid-template properties.



/* In this example, the second column will vary in size between 100px and 500px depending on the size of the web browser" */

.grid {
  display: grid;
  grid-template-columns: 100px minmax(100px, 500px) 100px;
}

 

You may also like :