CSS grid-template-rows 属性

最后更新于:2022-03-27 03:02:20

CSS grid-template-rows 属性

实例

指定行大小(高度):

.grid-container {
display: grid;
grid-template-rows: 100px 300px;
}

尝试一下 »


浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
grid-template-rows 57 16 52 10 44

属性定义及使用说明

grid-template-rows 属性用于设置网格布局中的行数及高度。

这些值是一个以空格分隔的列表,其中每个值指定相应行的高度。

默认值: auto
继承: no
动画: 支持。 阅读关于 animatable
尝试一下
版本: CSS 网格布局模块 Level 1
JavaScript 语法: object.style.gridTemplateRows=”50px 200px”
尝试一下


语法

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

描述
none 默认值,不指定行的大小。
auto 行的大小由容器的大小和行中网格元素内容的大小决定。
max-content 每行的大小设置为该行中最大网格元素的大小。
min-content 每行的大小设置为该行中最小网格元素的大小。
length 长度值,可以是 px 为单位的数值或百分比 %。 0 是默认值。 了解更多长度单位
initial 将此属性设置为默认值。
阅读关于 initial
inherit 从父元素继承该属性。
阅读关于 inherit

相关文章

CSS 教程: CSS 网格布局

CSS 参考手册: grid-columns 属性

CSS 参考手册: grid-template 属性