grid-row 是 css grid 中控制元素在行方向跨越的关键属性，支持简写（如 grid-row: 2 / 4）和分离写法（grid-row-start/grid-row-end），可实现大卡跨行、小卡错位等不规则布局，并需配合 grid-column 或 auto-placement 避免重叠，响应式中可通过媒体查询动态调整跨行数。
grid-row 是 CSS Grid 中控制元素在行方向跨越的关键属性，用它可以让卡片跨越多行，实现错落有致、不规则的视觉排版效果。
理解 grid-row 的两种写法
grid-row 支持两种常用语法：
-
简写形式：
grid-row: 2 / 4;表示从第 2 行线开始，到第 4 行线结束（即跨越第 2、3 行，共占 2 行） -
分离写法：
grid-row-start: 2; grid-row-end: 4;语义更清晰，适合复杂布局调试
注意：行线编号从容器顶部开始，第 1 行线在最上方，数值越大越靠下；负值可从底部反向计数，如 -2 表示倒数第二条行线。
用 grid-row 实现“大卡+小卡”交错布局
常见不规则排版如首页卡片流：一张高图卡占 2 行，旁边并列两张普通卡各占 1 行。关键在于让大卡明确跨行，小卡自动或指定行位置：
.big-card { grid-row: 1 / 3; grid-column: 1; }
.small-card:nth-child(2) { grid-row: 1; grid-column: 2; }
.small-card:nth-child(3) { grid-row: 2; grid-column: 2; }
此时网格容器需至少定义 2 行（如 grid-template-rows: 1fr 1fr;），但实际中常配合 grid-auto-rows 让后续行自适应，避免手动设满。
结合 grid-column 和 auto-placement 避免重叠
只设 grid-row 不够，必须配合列定位或启用自动放置规则：
- 显式指定
grid-column可完全掌控位置，适合固定结构 - 若依赖
grid-auto-flow: row dense;，浏览器会尝试填满空缺，但可能打乱 DOM 顺序；稳妥做法是给每张卡都设置grid-row和grid-column - 用
span关键字更直观，如grid-row: 2 / span 2;表示从第 2 行线开始，向下跨 2 行
响应式中动态调整跨行数
不同屏幕下卡片高度变化时，跨行数也应适配：
- 移动端窄屏：大图卡可设为
grid-row: span 1;（恢复单行） - 桌面端宽屏：改为
grid-row: span 2;或具体行列范围 - 用媒体查询切换，例如：
@media (min-width: 768px) { .hero-card { grid-row: 1 / span 2; } }
注意避免在响应式中仅改 grid-row-start 而忽略 end，否则可能造成意外溢出或重叠。
不复杂但容易忽略的是：grid-row 作用对象是网格项本身，不是内容；它改变的是该项在网格轨道中的占位，不影响内部子元素布局。只要行轨道存在（显式定义或由内容撑开），跨行就能生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
