Why Does `minmax()` Expand Grid Rows to Maximum Instead of Minimum Size?

minmax() Adjusts to Maximum Instead of Minimum

While attempting to set minmax() for grid-template-rows, it was observed that the grid rows expanded to the maximum value rather than the minimum. This behavior raises the question of how to ensure grid rows remain at their minimum size, expanding only when necessary.

Solution

Generally, tracks aim to reach their maximum size, distributing free space equally. To achieve the desired behavior of tight wrapping without exceeding a limit, consider the following adjustments:

• Alter row sizes to minmax(50px, min-content) to tightly wrap rows around the content, preventing them from shrinking below 50px.
• Implement max-height: 150px for grid items to limit their maximum height to 150px.

By combining these modifications, the grid rows will remain at the specified minimum size while expanding up to the maximum size when required.

The above is the detailed content of Why Does `minmax()` Expand Grid Rows to Maximum Instead of Minimum Size?. For more information, please follow other related articles on the PHP Chinese website!