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 的简写语义清晰、维护成本低。 唱鸭 音乐创作全流程的AI自动作曲工具集 AI 辅助作词、AI 自动作曲、编曲、混音于一体