grid-row和grid-column仅在display: grid/inline-grid容器的直接子元素上生效；需用线号（如2/4）、命名线（如a/c）或span语法，注意线号从1开始、无0，负值从末尾计数。
grid-row 和 grid-column 怎么写才生效
这两个属性只在 Grid 容器的直接子元素（即 grid item）上起作用，且容器必须声明 display: grid 或 display: inline-grid。父容器没设 grid，写再多 grid-row 也当普通 CSS 属性被忽略。
实操建议：
-
grid-row控制上下跨度，接受start / end形式，比如grid-row: 2 / 4表示从第 2 行线开始、到第 4 行线结束（占第 2、3 两行轨道） -
grid-column同理控制左右，grid-column: 1 / -1是常见写法——从第 1 列线到最后一列线，横跨全部列 - 支持关键字：
auto（默认行为）、span N（如grid-row: span 2），但注意span是跨轨道数，不是跨行号
为什么设置了 grid-row 却没按预期定位
最常见原因是混淆了「线（line）」和「区域（area）」编号。Grid 线从 1 开始计数，正向递增，负向从末尾倒数：第 -1 条线 = 最后一条线，第 -2 条线 = 倒数第二条线。写成 grid-row: 0 / 2 或 grid-row: -0 / 2 都无效——线号没有 0。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
grid-row: 2 / 5，但容器只有 3 行轨道 → 实际渲染会自动扩展隐式网格，但位置可能漂移 - 用
grid-template-rows: [a] 100px [b] 200px [c]定义了命名线，却仍用数字写grid-row: a / c—— 必须加方括号：grid-row: a / c才对；不加就是数字语法 - 父容器用了
grid-auto-flow: column，此时grid-row仍控制行位置，但自动放置逻辑已转向列优先，容易和直觉冲突
grid-row-start / grid-row-end 有必要单独写吗
没必要刻意拆开，除非你需要分别覆盖继承值或做条件样式。grid-row 是 grid-row-start 和 grid-row-end 的简写，语义清晰、维护成本低。
使用场景与差异：
- 单值写法如
grid-row: 3等价于grid-row-start: 3; grid-row-end: 4（自动占一个轨道） - 双值写法
grid-row: 2 / -1比分开写更紧凑，也避免遗漏某一项导致意外继承 - 若用 CSS 变量动态控制，
grid-row: var(--start) / var(--end)比分别设两个变量更可控 - 注意：
grid-row-end设为auto不代表“到末尾”，而是“由自动放置算法决定”，和-1完全不同
响应式中 grid-row 改变时布局错乱怎么办
Grid 项目的位置是静态声明的，不会随容器尺寸自动重排。如果媒体查询里只改了 grid-row，但没同步调整 grid-template-rows 或其他项目的定位，极易出现重叠或空白。
实操建议：
- 优先用
grid-area配合命名区域（grid-template-areas），在不同断点切换整个布局结构，比逐个调grid-row更稳健 - 若必须用
grid-row，确保所有相关项目在同一切片下统一调整，例如：同一块内容在桌面端占两行，在移动端改单行，那它下方的项目也要相应上调grid-row-start - 用
grid-row: 1 / -1这类“撑满”写法时，注意容器高度是否受内容限制——Grid 不会强制拉伸容器，可能造成视觉截断
线号、命名线、span 语义混用是最容易被忽略的复杂点，调试时先用浏览器开发者工具悬停 grid 线，确认你写的数字真对应那条线。
