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().
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.
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:
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!