首页 >web前端 >css教程 >为什么 `grid-template-rows` 中的 `minmax()` 有利于最大尺寸,以及如何保持最小行高?

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

Barbara Streisand
Barbara Streisand原创
2024-12-08 14:00:23915浏览

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

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn