grid-row-start 和 grid-row-end 用于定义网格项的行起始和结束位置，通过行线编号或 span 跨越行数，实现元素在网格中的精确布局控制。
CSS 中 grid-row-start 和 grid-row-end 属性用于控制网格项（grid item）在网格行中的起始和结束位置。通过这两个属性，可以精确地指定一个元素跨越多少行，或将其放置在特定的行线之间。
grid-row-start：定义起始行线
该属性指定网格项从哪一条行线开始。
• 可以设置为行线的编号（从 1 开始）• 也可以使用 span 关键字来表示跨越的行数
• 还可以使用 auto，表示由浏览器自动计算位置
示例：
grid-row-start: 2; /* 从第 2 条行线开始 */
grid-row-start: span 3; /* 向前跨越 3 行 */
grid-row-end：定义结束行线
该属性指定网格项在哪一条行线结束。
立即学习“前端免费学习笔记（深入）”；
• 同样接受行线编号、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 的配合。
