异常教程

CSS grid-template-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 Layout（CSS网格布局）作为解决复杂布局的利器，其灵活性和强大功能为开发者提供了高效的解决方案。在众多CSS Grid属性中，grid-template-rows 是控制网格行布局的关键属性。本文将从基础概念、语法解析、实际案例到高级技巧，系统性地讲解这一属性的使用方法，并结合形象比喻帮助读者快速掌握其核心逻辑。

一、理解CSS Grid的基础概念

在深入探讨grid-template-rows之前，我们需要先明确CSS Grid的核心概念。
CSS Grid 是一种二维布局系统，允许开发者通过定义网格容器（grid container）和网格项（grid items）来构建复杂的布局结构。它的核心思想是将页面划分为**行（rows）和列（columns）**组成的网格，每个网格单元可以灵活控制大小和位置。

形象比喻：
可以把CSS Grid想象成一个棋盘，grid-template-rows的作用类似于决定棋盘每一行的高度。例如，如果我们想让棋盘的前两行高3厘米，第三行高5厘米，就可以通过grid-template-rows属性来设定。

二、grid-template-rows的基本语法与单位

2.1 基础语法

grid-template-rows 属性用于定义网格容器中行的尺寸。其基本语法如下：

grid-template-rows: <track-size> [ <track-size> ]*;

其中，<track-size> 可以是以下几种值：

  • 绝对长度单位：如 px、cm、em 等。
  • 相对单位：如 %、fr（弹性单位）。
  • 函数：如 minmax()、repeat()。

示例代码：

.grid-container {  
  display: grid;  
  grid-template-rows: 100px 200px 150px; /* 定义三行，高度分别为100px、200px、150px */  
}

2.2 关键单位详解

2.2.1 绝对单位（Absolute Units）

使用绝对单位（如 px、rem）时，行的高度是固定值，不会随浏览器窗口变化而变化。
案例：

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

此代码会生成两行，第一行高度固定为100像素，第二行为150像素。

2.2.2 相对单位（Relative Units）

%（百分比）：以容器父元素的高度为基准计算行高。例如：

.grid-container {  
  grid-template-rows: 30% 70%;  
}

此代码会将容器高度的30%分配给第一行，70%分配给第二行。

fr（弹性单位）：这是CSS Grid独有的单位，表示“等分”。1fr代表容器剩余空间的1份。例如：

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

此代码将容器高度分为4份（1+2+1），第一行占1份，第二行占2份，第三行占1份。

2.2.3 函数与重复模式

minmax()：定义行的最小和最大高度。例如：

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

此代码表示行的最小高度为100像素，最大为1份弹性空间。

repeat()：简化重复行的书写。例如：

grid-template-rows: repeat(3, 1fr); /* 等同于1fr 1fr 1fr */

三、grid-template-rows的实际应用场景

3.1 基础布局案例：三行等高布局

需求：创建一个包含三行等高布局的容器。

.grid-container {  
  display: grid;  
  grid-template-rows: repeat(3, 1fr); /* 三行，每行占1份弹性空间 */  
  height: 100vh; /* 容器高度占满视口 */  
}

此代码通过fr单位实现三行等分容器高度的效果。

3.2 混合单位布局：固定高度与弹性空间

需求：第一行固定高度为100px，剩余空间由其他两行等分。

.grid-container {  
  display: grid;  
  grid-template-rows: 100px 1fr 1fr;  
  height: 600px;  
}

此布局中，第一行固定为100像素，后两行各占剩余500像素的50%（即250像素）。

3.3 响应式设计案例

需求：在移动端显示单列布局，在桌面端显示三行布局。

.grid-container {  
  display: grid;  
  /* 移动端：单行 */  
  grid-template-rows: 1fr;  
  @media (min-width: 768px) {  
    /* 桌面端：三行等高 */  
    grid-template-rows: repeat(3, 1fr);  
  }  
}

四、进阶技巧与常见问题

4.1 自动填充分列（Implicit Tracks）

当网格项的数量超过显式定义的行数时，CSS Grid会自动创建隐式轨道。通过grid-auto-rows属性可以控制隐式行的高度。

.grid-container {  
  grid-template-rows: 100px 200px; /* 显式定义两行 */  
  grid-auto-rows: 150px; /* 隐式行高度为150px */  
}

4.2 负值与自动值（auto）

grid-template-rows允许使用auto值，表示行高由内容决定。例如：

grid-template-rows: auto 200px;

第一行高度由内容撑开，第二行固定为200像素。

4.3 常见误区与解决方案

  • 误区1：忘记设置容器高度。
    解决：需为网格容器显式设置height或通过内容撑开高度。
  • 误区2：fr单位未与auto混合使用。
    解决：fr必须存在于弹性容器中，且不能与auto直接混合。

五、综合案例：电商商品列表布局

需求：创建一个包含标题、商品列表和页脚的布局，要求：

  1. 标题固定高度为60px；
  2. 商品列表占满剩余空间；
  3. 页脚固定高度为50px。
.page-container {  
  display: grid;  
  grid-template-rows: 60px 1fr 50px;  
  height: 100vh;  
}  

.header {  
  background-color: #f0f0f0;  
}  

.content {  
  overflow-y: auto; /* 内容过多时显示滚动条 */  
}  

.footer {  
  background-color: #333;  
  color: white;  
}

结论

grid-template-rows 是CSS Grid布局的核心属性之一，通过灵活组合单位和函数，开发者可以快速实现复杂、响应式的行布局。本文通过基础语法、实际案例和进阶技巧的讲解，帮助读者掌握这一属性的使用方法。掌握grid-template-rows后，结合grid-template-columns和gap等属性，可以进一步探索CSS Grid的全部潜力，为网页设计提供更高效、优雅的解决方案。

（全文约1800字）

最新发布

查看更多文章