Why Does `minmax()` in CSS Grid Default to `max` Instead of `min`?

Why minmax() Defaults to Max

You may have noticed that when using minmax() to set the height or width of grid rows or columns, the default behavior is for the track to expand to its maximum size instead of staying at its minimum size. This can be confusing, especially if you're expecting the track to remain at its smallest possible size according to the min() value in minmax().

Understanding the Behavior

The reason for this behavior lies in the default scaling mode of tracks in a grid layout. According to the CSS spec, tracks will typically grow to fill available space until they reach their max size. If the available space is greater than the total minimum size of all tracks, the remaining space is distributed evenly among the unlimited tracks (those without a defined max size).

This default behavior is usually desired, as it ensures that tracks occupy the available space efficiently.

Achieving Minimum Size Priority

To make grid rows or columns remain at their minimum size, but expand to their maximum size when more content is added, you can use a combination of minmax() and other CSS properties:

• Use minmax(min-size, min-size) for Row/Column Sizing: This will force the tracks to always stay at their minimum size, even when there is available space.
• Specify max-width/max-height on Grid Items: This will prevent the grid items from exceeding their maximum size, ensuring that the grid rows or columns do not expand beyond their specified maximum size.

Example:

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
  grid-gap: 20px;
}

.item {
  max-width: 200px;
}

In this example, the grid columns will always have a minimum width of 100px, but will not expand beyond that size. If more content is added to the grid items, the columns will expand to accommodate the new content, but will not exceed their maximum width.

The above is the detailed content of Why Does `minmax()` in CSS Grid Default to `max` Instead of `min`?. For more information, please follow other related articles on the PHP Chinese website!