CSS grid-template-rows 属性

定义和用法

grid-template-rows 规定网格布局中的行数（和高度）。

值是用空格分隔的列表，其中每个值指定相应行的高度。

另请参阅：

CSS 教程：CSS 网格布局

CSS 参考手册：grid-columns 属性

CSS 参考手册：grid-template 属性

实例

规定 row-size（高度）：

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

亲自试一试

CSS 语法

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

属性值

值 描述
none 未设置尺寸。在需要时创建行。
auto 行的尺寸取决于容器的大小以及行中项目内容的大小。
max-content 根据行中的最大项目设置每行的尺寸。
min-content 根据行中的最小项目设置每行的尺寸。
length 设置行的尺寸，通过使用合法的长度值。参阅长度单位。

技术细节

默认值： none
继承： 否
动画制作： 支持。请参阅：动画相关属性。
版本： CSS Grid Layout Module Level 1
JavaScript 语法： object.style.gridTemplateRows="50px 200px"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44