CSS grid-auto-rows 属性
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()
函数指定了自动增长的最小和最大高度。
注意事项
- 指定的行高不会影响由
auto
计算出的行高。 - 如果行高未指定,行会根据内容自动调整。
- 如果
grid-auto-rows
和grid-template-rows
指定的行高冲突,以后者为准。 grid-auto-rows
不会影响任何显式指定的行。
兼容性
grid-auto-rows
属性的浏览器兼容性较好,支持情况如下:
- Chrome:支持
- Firefox:支持
- Safari:支持
- Edge:支持
- IE:不支持
结语
grid-auto-rows
是一项非常有用的属性,可以为 CSS Grid 布局提供强大的灵活性。了解并使用此属性可以让我们更好地控制行高度和布局自适应性,也可以节省显示的空间。