异常教程

CSS3 grid-rows 属性（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代网页设计中，CSS Grid 布局已成为构建复杂布局的核心工具。而 grid-rows 属性作为其核心组成部分之一，能够帮助开发者精准控制网格容器的行高、间距与对齐方式。无论是初学者还是有一定经验的开发者，掌握这一属性都能显著提升布局效率。本文将从基础概念到实战案例，系统解析 grid-rows 的工作原理与应用场景，助你轻松驾驭 CSS Grid 的强大功能。

一、理解 Grid-rows 的基本概念

1.1 Grid-rows 的定义与作用

grid-rows 属性是 CSS Grid 布局中用于定义网格容器行轨道（tracks）的属性。它通过设置行的高度、间距和对齐方式，决定网格项（grid items）在垂直方向上的排列规则。

形象比喻：

如果把整个网格布局比作一张表格，grid-rows 就像表格中的“行高设置器”，它决定了每一行占据的空间大小和分布方式。

1.2 关键术语解析

在深入代码之前，需明确几个核心概念：

  • Grid Container（网格容器）：应用了 display: grid 的父元素。
  • Grid Track（网格轨道）：行或列的单个单元，grid-rows 控制垂直方向的轨道。
  • Grid Gap（网格间隙）：轨道之间的间距，通过 grid-row-gap 或简写属性 grid-gap 设置。

二、Grid-rows 的语法与常用值

2.1 基础语法结构

grid-rows 属性通常通过 grid-template-rows 简写形式使用：

.container {  
  display: grid;  
  grid-template-rows: <值1> <值2> ... <值n>;  
}

每个 <值> 可以是具体长度（如 50px）、百分比（如 25%）、auto 或 fr 单位等。

2.2 常用值详解

（1）固定长度值

直接指定行高为固定像素或百分比：

grid-template-rows: 100px 150px auto;
  • 特点：精确控制，适合需要严格尺寸的场景。
  • 局限：缺乏灵活性，可能在不同屏幕尺寸下表现不佳。

（2）auto 关键字

auto 会根据内容自动调整行高：

grid-template-rows: auto 1fr auto;
  • 适用场景：当行内内容高度不固定时，如动态加载的文本或图片。

（3）fr 单位（Flexible Length）

fr 是 CSS Grid 独有的单位，表示“弹性分数”：

grid-template-rows: 1fr 2fr 1fr;
  • 工作原理：剩余空间按比例分配。例如，上述代码中第二行将占据剩余空间的 2/4（即 50%）。
  • 优势：实现响应式布局的核心工具，尤其适合等分或比例分配行高。

（4）重复声明 repeat() 函数

通过 repeat() 减少重复代码，适合创建等高行：

grid-template-rows: repeat(3, 100px);
  • 高级用法： 
    grid-template-rows: repeat(auto-fill, minmax(200px, 1fr));

    该代码会根据容器宽度自动生成等高行，每行最小 200px，最大填满剩余空间。

三、Grid-rows 与相关属性的区别

3.1 grid-template-rows vs grid-rows

虽然名称相似，但两者存在关键区别：
| 属性名 | 作用范围 | 是否覆盖旧定义 |
|-----------------------|------------------------------|---------------------|
| grid-template-rows | 定义新轨道，保留旧轨道 | 否 |
| grid-rows | 简写属性，尚未标准化 | 部分浏览器支持 |

注意：目前主流浏览器更广泛支持 grid-template-rows，建议优先使用该属性以确保兼容性。

3.2 与 grid-row-gap 的协同使用

grid-row-gap 控制行轨道间的垂直间距：

.container {  
  grid-template-rows: repeat(3, 1fr);  
  grid-row-gap: 20px;  
}
  • 简写形式：使用 grid-gap: 20px 可同时设置行与列的间距。

四、实战案例：打造响应式布局

4.1 案例 1：三行布局的新闻网站

需求：设计一个包含页头、内容区和页脚的布局，要求：

  • 页头固定高度 80px
  • 内容区占据剩余空间的 70%
  • 页脚高度为内容区的一半

代码实现：

.grid-container {  
  display: grid;  
  grid-template-rows: 80px calc(70vh) calc(35vh);  
  height: 100vh;  
}

关键点：通过 calc() 函数结合视口单位 vh，实现动态高度分配。

4.2 案例 2：自适应卡片列表

需求：创建一个可响应的卡片列表，要求：

  • 在桌面端显示 3 列
  • 在移动端自动堆叠为单列
  • 每个卡片高度随内容自适应

代码实现：

.cards-grid {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
  grid-template-rows: auto;  
  gap: 20px;  
}

关键点：auto-fit 和 minmax() 的组合确保了响应式列布局，而 grid-template-rows: auto 使行高随卡片内容自动扩展。

五、进阶技巧与常见问题解答

5.1 使用 minmax() 实现弹性布局

通过 minmax() 可同时设置轨道的最小和最大值：

grid-template-rows: minmax(100px, 1fr);

该代码表示行高至少为 100px，最多填满剩余空间。

5.2 常见问题：行高未生效的原因

  • 问题：设置 grid-template-rows 后，行高未按预期显示。
  • 可能原因：
    1. 父容器未设置 display: grid；
    2. 使用了 grid-row 覆盖轨道定义；
    3. 浏览器兼容性问题。

5.3 调试技巧：使用浏览器开发者工具

  • 在 Chrome DevTools 中，切换到“Grid”选项卡可直观查看轨道分布和间隙。

六、总结与展望

掌握 grid-rows 属性是解锁 CSS Grid 强大功能的关键一步。通过本文的讲解，读者应能：

  1. 理解 grid-rows 的基本语法与常用值；
  2. 熟练运用 fr 单位和 repeat() 实现响应式布局；
  3. 通过实战案例解决实际开发中的布局问题。

随着 CSS Grid 的持续发展，未来可能涌现出更多简化语法的特性（如 grid-rows 的标准化）。建议开发者持续关注规范更新，同时结合实践深化对布局原理的理解。

最后提醒：布局设计的本质是平衡功能与美学。善用 grid-rows 等工具，但始终以用户体验为核心，方能构建出既高效又优雅的网页界面。

最新发布

查看更多文章