css grid-template-rows行高设置方法_技术学堂

css grid-template-rows行高设置方法

发布时间：2025-10-17 13:21

发布者：网络

浏览次数：

grid-template-rows用于定义网格行高，支持像素、百分比、fr、auto等单位；2. 可用固定值、相对单位或fr分配空间，结合repeat简化重复设置，实现灵活布局。

css grid-template-rows行高设置方法

CSS 的 grid-template-rows 属性用于定义网格容器中每一行的高度。你可以通过多种方式灵活设置行高，满足不同布局需求。

可以直接为每一行指定具体的像素值或其他绝对单位。

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

上面代码创建了三行，高度分别为 100px、50px 和 80px。

可以用百分比（%）、em、rem 等相对单位来设置行高，使布局更具响应性。

.container {
  display: grid;
  grid-template-rows: 20% 60% 20%;
}

整个网格高度基于容器，三行分别占 20%、60%、20%。

fr（fraction）单位表示可用空间的份数，非常适合弹性布局。

.container {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
}

总共有 4 份，第二行占 2 份，第一和第三行各占 1 份，自动均分容器高度。

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

使用 auto 可让某一行根据内容自动调整高度。

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

首尾行根据内容自适应，中间行填满剩余空间，适合页头、主体、页脚布局。

当多行需要相同高度时，用 repeat() 更简洁。

.container {
  grid-template-rows: repeat(3, 100px);
}

生成三行，每行 100px 高。

基本上就这些常用方法。根据实际布局选择合适的单位组合，能高效实现各种行高控制。

以上就是css grid-template-rows行高设置方法的详细内容，更多请关注其它相关文章！