CSS grid-template-rows 属性

放鹤归舟

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

版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com

目录[+]

取消
微信二维码
微信二维码
支付宝二维码