为什么 CSS Grid 中的 `minmax()` 默认为 `max` 而不是 `min`？

为什么 minmax() 默认为 Max

您可能已经注意到，当使用 minmax() 设置网格行或列的高度或宽度时，默认行为是让轨道扩展至其最大尺寸而不是保持其最小尺寸。这可能会令人困惑，特别是如果您希望轨道根据 minmax() 中的 min() 值保持尽可能小的大小。

理解行为

原因此行为在于网格布局中轨道的默认缩放模式。根据 CSS 规范，轨道通常会增长以填充可用空间，直到达到最大尺寸。如果可用空间大于所有轨道的总最小大小，则剩余空间将均匀分布在无限轨道（没有定义最大大小的轨道）中。

通常需要这种默认行为，因为它确保轨道有效地占用可用空间。

实现最小尺寸优先级

使网格行或列保持最小尺寸，但当更多时扩展到最大尺寸添加内容后，您可以结合使用 minmax() 和其他 CSS 属性：

• 使用 minmax(min-size, min-size) 调整行/列大小：这将迫使轨道始终保持最小尺寸，即使有可用空间也是如此。
• 指定 max-width/max-height网格项：这将防止网格项超过其最大大小，确保网格行或列不会扩展超过其指定的最大大小。

示例：

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
  grid-gap: 20px;
}

.item {
  max-width: 200px;
}

在此示例中，网格列的最小宽度始终为 100 像素，但不会超出该宽度 尺寸。如果向网格项添加更多内容，列将扩展以容纳新内容，但不会超过其最大宽度。

以上是为什么 CSS Grid 中的 `minmax()` 默认为 `max` 而不是 `min`？的详细内容。更多信息请关注PHP中文网其他相关文章！