首页 > 文章 > 前端

CSSgrid-row-start和grid-row-end详解

时间：2025-12-17 20:27:33 357浏览收藏

推广推荐

支持 PC / 移动端，安全直达

你在学习文章相关的知识吗？本文《CSS grid-row-start 和 grid-row-end 使用详解》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

grid-row-start 和 grid-row-end 用于定义网格项的行起始和结束位置，通过行线编号或 span 跨越行数，实现元素在网格中的精确布局控制。

css grid-row-start和end属性使用方法

CSS 中 grid-row-start 和 grid-row-end 属性用于控制网格项（grid item）在网格行中的起始和结束位置。通过这两个属性，可以精确地指定一个元素跨越多少行，或将其放置在特定的行线之间。

该属性指定网格项从哪一条行线开始。

• 可以设置为行线的编号（从 1 开始）
• 也可以使用 span 关键字来表示跨越的行数
• 还可以使用 auto，表示由浏览器自动计算位置

示例：

grid-row-start: 2; /* 从第 2 条行线开始 */
grid-row-start: span 3; /* 向前跨越 3 行 */

该属性指定网格项在哪一条行线结束。

• 同样接受行线编号、span 或 auto
• 结束位置不包含该行线本身，而是停在它之前

示例：

grid-row-end: 5; /* 在第 5 条行线前结束 */
grid-row-end: span 2; /* 从起始位置开始，再跨 2 行 */

将两个属性结合使用，可以灵活地让一个元素占据多行。

/* 占据第 2 到第 4 行（即跨越 2 行） */
grid-row-start: 2;
grid-row-end: 4;

等价写法（使用 grid-row 简写）：

grid-row: 2 / 4;

使用 span 的场景：

/* 从第 2 行开始，跨越 3 行 */
grid-row-start: 2;
grid-row-end: span 3;

• 布局中侧边栏占满多行
• 卡片式设计中某个内容块需要纵向延伸
• 模态框或横幅跨越整个内容区域高度

例如，一个两行结构的网格：

.container {
  display: grid;
  grid-template-rows: auto auto;
}
.item {
  grid-row-start: 1;
  grid-row-end: 3; /* 跨越到第 3 行线，即占满两行 */
}

基本上就这些。合理使用 grid-row-start 和 end 能让你更自由地控制网格布局中的元素排列，尤其适合复杂页面结构。不复杂但容易忽略细节，比如行线编号和 span 的配合。

本篇关于《CSSgrid-row-start和grid-row-end详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！