为什么 `grid-template-rows` 中的 `minmax()` 有利于最大尺寸，以及如何保持最小行高？

minmax() 函数默认为 Max 行为

将 minmax() 应用于 grid-template-rows 时，结果行为通常会违反预期，优先考虑最大值最小值。这会导致网格行意外拉伸，让我们想知道：

如何将网格行保持在最小大小

确保网格行保持其最小声明大小，同时扩展到最大大小必要时，考虑以下解决方案：

1.对 grid-template-rows 使用 minmax(min-content, max-size)

此修改强制行“紧紧包裹”其内容，确保它们以最小大小开始并仅扩展当添加更多内容时。最大大小保证它们不会超过所需的最大值。

2.为网格项添加 max-height

要防止网格项超出所需的最大尺寸，请为其设置 max-height。

示例：

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

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

通过这种方法，网格行最初的高度将为 50 像素，但会扩展以适应其他内容。但是，它们不会超过 150px 的最大高度。

以上是为什么 `grid-template-rows` 中的 `minmax()` 有利于最大尺寸，以及如何保持最小行高？的详细内容。更多信息请关注PHP中文网其他相关文章！