异常教程

CSS grid-row-end 属性（建议收藏）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 布局的普及，开发者可以更高效地实现复杂的网格结构。而 CSS grid-row-end 属性正是这一布局体系中的重要工具之一，它允许开发者精确控制元素在垂直方向上的结束位置。无论是构建响应式设计，还是实现非对称布局，这一属性都能提供灵活的解决方案。本文将从基础概念出发，逐步解析 grid-row-end 的使用逻辑，并通过实际案例帮助读者掌握其核心技巧。

理解 CSS Grid 布局的基础概念

在深入探讨 grid-row-end 属性之前，需要先熟悉 CSS Grid 的核心概念：网格线（Grid Lines）。

网格线与网格轨道

CSS Grid 通过定义 行（rows） 和 列（columns） 构建网格结构，每一条行和列的边界都被称为 网格线。例如，若定义了 grid-template-rows: 50px 100px，则会生成两条行轨道，且共有 3 条行线（从上到下依次编号为 1、2、3）。同理，列轨道的网格线也会按类似方式编号。

形象比喻：可以将网格线想象为棋盘上的横线与竖线，而元素的位置则由其占据的网格线范围决定。

元素定位的四大属性

Grid 布局通过以下四个属性控制元素的位置：

  • grid-row-start：定义元素起始的行线
  • grid-row-end：定义元素结束的行线
  • grid-column-start：定义元素起始的列线
  • grid-column-end：定义元素结束的列线

其中，grid-row-end 属性决定了元素在垂直方向上占据的结束位置，是控制元素高度和跨行行为的核心工具。

grid-row-end 属性详解

语法与取值

语法：

grid-row-end: <line>;

取值类型：
| 值 | 描述 |
|-------------|----------------------------------------------------------------------|
| auto | 自动放置，根据其他属性或网格结构决定结束位置 |
| | 指定绝对网格线编号，例如 3 表示结束于第三条行线 |
| span | 跨越指定数量的轨道，例如 span 2 表示占据下方两个行轨道 |
| - | 保留值，通常用于占位，避免与 grid-row-start 冲突 |

关键行为解析

  1. 绝对定位模式
    当使用 <number> 值时，元素会直接定位到指定的行线。例如：

    .item {  
  grid-row-start: 2;  
  grid-row-end: 4;  
}

    此时元素会占据从第2行线到第4行线之间的 两行轨道（轨道数量 = 结束线 - 起始线）。

  2. 跨行模式（span）
    使用 span 可以直接指定跨越的轨道数量：

    .item {  
  grid-row-start: 1;  
  grid-row-end: span 3;  
}

    此时元素会从第1行线开始，占据下方 3 个行轨道，结束于第4行线。

  3. 自动定位模式
    若未显式设置 grid-row-start 或 grid-row-end，元素会按照网格的 自动放置规则 定位。此时 auto 表示系统自动计算结束位置。

实际案例与代码演示

案例 1：基础网格布局

假设需要创建一个 3x3 的网格，其中某个元素需要跨两行：

<div class="grid-container">  
  <div class="item1">Item 1</div>  
  <div class="item2">Item 2</div>  
</div>  

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

.item1 {  
  grid-row-start: 1;  
  grid-row-end: 3;  
  background-color: #f0e6fa;  
}  

.item2 {  
  grid-row-start: 2;  
  grid-row-end: 4;  
  background-color: #d3d3d3;  
}

效果说明：

  • Item1 从第1行线开始，到第3行线结束，占据两行高度。
  • Item2 从第2行线开始，到第4行线结束，同样占据两行，但垂直位置与 Item1 有重叠。

案例 2：动态跨行布局

通过 span 实现响应式设计：

.responsive-item {  
  grid-row-start: 1;  
  grid-row-end: span 2; /* 根据屏幕宽度动态调整 */  
}  

@media (max-width: 768px) {  
  .responsive-item {  
    grid-row-end: span 1; /* 移动端仅占一行 */  
  }  
}

进阶技巧与注意事项

技巧 1：结合 grid-row 简写语法

可以使用 grid-row: <start> / <end> 简化代码：

.item {  
  grid-row: 1 / span 2; /* 等同于 grid-row-start:1; grid-row-end: span 2 */  
}

技巧 2：负数定位

允许使用负数表示从末尾倒数的网格线：

.item {  
  grid-row-end: -1; /* 结束于倒数第一条行线 */  
}

常见问题与解决方案

  • 问题：设置的结束线超出网格范围会如何？
    解答：Grid 会自动扩展网格结构，但需注意布局的可预测性。可通过 grid-auto-rows 定义默认轨道尺寸。

  • 问题：元素重叠时如何控制层叠顺序？
    解答：使用 z-index 属性调整层级，但需确保父容器设置了 position 属性。

结论

掌握 CSS grid-row-end 属性，能够显著提升开发者对网格布局的控制力。通过合理设置结束位置，可以轻松实现复杂布局，如跨行卡片、动态仪表盘等。本文通过基础概念、属性详解、案例演示和进阶技巧，帮助读者逐步构建对这一属性的全面理解。建议读者通过实践不同场景，例如结合媒体查询或 JavaScript 动态计算网格线，进一步探索其潜力。记住，Grid 布局的核心在于理解网格线的编号逻辑，而 grid-row-end 正是这一逻辑的直观体现。

通过本文的学习，开发者可以更自信地应对网页布局挑战，将网格的灵活性转化为设计的创造力。

最新发布

查看更多文章