Why Does `minmax()` in `grid-template-rows` Favor Maximum Size, and How Can I Maintain Minimum Row Heights?

minmax() Function Defaulting to Max Behavior

When applying minmax() to grid-template-rows, the resulting behavior often defies expectations, prioritizing the max value over the min value. This leads to unexpected stretching of grid rows, leaving us to wonder:

How to Keep Grid Rows at Minimum Size

To ensure grid rows remain at their minimum declared size, while expanding to the maximum when necessary, consider the following solution:

1. Use minmax(min-content, max-size) for grid-template-rows

This modification forces the rows to "wrap tightly" around their content, ensuring they start with the minimum size and expand only when more content is added. The max-size guarantees they don't exceed the desired maximum.

2. Add max-height to grid items

To prevent grid items from stretching beyond the desired maximum size, set max-height on them.

Example:

body {
  grid-template-rows: minmax(50px, min-content);
}

grid-items {
  max-height: 150px;
}

With this approach, grid rows will initially be 50px high, but will expand to fit additional content. They won't, however, exceed the maximum height of 150px.

The above is the detailed content of Why Does `minmax()` in `grid-template-rows` Favor Maximum Size, and How Can I Maintain Minimum Row Heights?. For more information, please follow other related articles on the PHP Chinese website!