目录

CSS grid-template-rows 属性

❮上一节完整的CSS参考下一节❯

示例

指定行大小（高度）：

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

亲自试一试 »

定义和用法

这个grid-template-rows属性指定网格布局中的行数（和高度）。

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

展示演示❯

默认值：	没有任何
遗传：	不
可动画：	是的。阅读可动画的尝试一下
版本：	CSS 网格布局模块级别 1
JavaScript 语法：	对象.style.gridTemplateRows="50px 200px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
grid-template-rows	57	16	52	10	44

CSS 语法

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

属性值

Value	Description	Demo
none	No size is set. Rows are created if needed	Demo ❯
auto	The size of the rows is determined by the size of the container, and on the size of the content of the items in the row	Demo ❯
max-content	Sets the size of each row to depend on the largest item in the row
min-content	Sets the size of each row to depend on the smallest item in the row
length	Sets the size of the rows, by using a legal length value. Read about length units	Demo ❯

相关页面

CSS 教程：CSS 网格布局

CSS 参考：网格列属性

CSS 参考：网格模板属性

❮上一节完整的CSS参考下一节❯