CSS grid-auto-rows属性

概述

grid-auto-rows属性定义了未被显式指定的 grid 容器行的大小。
它适用于 CSS Grid Layout。

语法

grid-auto-rows: <track-size> | <line-names>? <track-size>+

• <track-size>：一个长度值，指定了未被显式指定的 grid 容器行的大小。
• <line-names>：一个命名行线的列表。

示例

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

上述代码中，定义了3列，但未定义行的数量。使用 grid-auto-rows 指定行的高度为100px。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

上述代码中，同样定义了3列，但使用 minmax() 函数指定了自动增长的最小和最大高度。

注意事项

1. 指定的行高不会影响由 auto 计算出的行高。
2. 如果行高未指定，行会根据内容自动调整。
3. 如果 grid-auto-rows 和 grid-template-rows 指定的行高冲突，以后者为准。
4. grid-auto-rows 不会影响任何显式指定的行。

兼容性

grid-auto-rows 属性的浏览器兼容性较好，支持情况如下：

• Chrome：支持
• Firefox：支持
• Safari：支持
• Edge：支持
• IE：不支持

结语

grid-auto-rows 是一项非常有用的属性，可以为 CSS Grid 布局提供强大的灵活性。了解并使用此属性可以让我们更好地控制行高度和布局自适应性，也可以节省显示的空间。