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