CSS Function - minmax()

The CSS function minmax() defines the size range, which begins at a minimum value and goes all the way up to a maximum value, inclusive.

To set size restrictions for grid items, use this function in CSS Grid

A minimum value and a maximum value are the two parameters that this function accepts.

  • Each parameter can have one of the following values: max-content, min-content, <flex>, <length>, <percentage>, or auto.

  • The minmax(min, max) function is used to represent the minimum value when the maximum value is less than the minimum value. The maximum value is ignored in this situation.

    To set a grid track's flex factor, a <flex> value can be used as a maximum, but it cannot be used as a minimum.

Possible values

  • <length> - A length that is greater than or equal to zero.

  • <percentage> - This rule defines a non-negative percentage with respect to the size of the grid container, which is adjusted based on column or row tracks.

  • <flex> - A dimension, expressed as a non-negative value in fr units, specifies the flex factor of the track.

    Each track whose size has been set with <flex> shares the remaining space in proportion to its flex factor.

  • max-content - Represents the maximum contribution to the max-content size of the grid elements occupying the grid track and is determined by the largest element in the track.

  • min-content - Represents the maximum contribution to the min content size of the grid elements occupying the grid track and is determined by the largest element in the track.

  • auto - When used as min, it means the largest minimum size (defined by min-width/min-height) of the grid items within the grid track. If it is used as max, it corresponds to the value max-content.

Syntax

<minmax()> = minmax( min , max )

CSS minmax() - Grid Layout

  • In the following example, the function minmax() is used within the CSS property grid-template-columns to create a responsive grid layout.

  • The minmax() function sets the minimum and maximum size limits for grid columns and ensures that each column is at least 100 pixels wide, but can expand further depending on the space available, allowing for a flexible and customizable layout.

<html>
<head>
<style>
   .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      grid-gap: 10px;
      padding: 15px;
   }
   .item {
      background-color: #3498db;
      color: white;
      text-align: center;
      padding: 20px;
      border-radius: 8px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>
      <div class="item">Item 11</div>
      <div class="item">Item 12s</div>
   </div>
</body>
</html>

CSS Related Properties

CSS function minmax() can be used within:

Advertisements