grid-row被忽略的主因是显式行轨道未定义、其他项挤占目标行或内容撑破轨道；需定义grid-template-rows/grid-auto-rows、避免跨行重叠、用minmax控制尺寸并借助devtools网格线验证。
grid-row 被忽略的常见原因
你写了 grid-row: 2，但元素还是出现在第 1 行末尾或第 2 行开头不对的位置——大概率不是 CSS 解析错误，而是 Grid 自动放置机制在“悄悄接管”。grid-row 只在显式指定起止线且轨道存在时才生效；一旦其他项占满前几行、或父容器未定义足够行轨道，浏览器会 fallback 到隐式网格（implicit grid），而你的 grid-row 值可能指向一个“不存在的显式行”。
显式行轨道未定义导致 grid-row 失效
Grid 不会因为你写了 grid-row: 2 就自动创建第 2 行。如果父容器只写了 grid-template-columns: 1fr 1fr，但没设 grid-template-rows 或 grid-auto-rows，那么第 2 行属于隐式行（implicit row），它的高度默认为 auto，且不参与显式定位的“对齐约束”。
- 写
grid-row: 2但没定义第 2 行 → 浏览器照常生成隐式行，但布局可能因内容撑高/压缩而错位 - 想确保第 2 行存在且可控：加
grid-template-rows: auto 100px（显式两行）或grid-auto-rows: 100px（所有隐式行统一高） - 检查 DevTools 的 Layout 面板 → 勾选 “Show line numbers”，确认第 2 条横线是否真的存在（有编号才表示是显式线）
其他项占用目标行位置引发挤占
即使 grid-row: 2 生效，也可能被别的元素“顶下去”。Grid 中多个项可以落在同一网格单元，此时 DOM 顺序决定层叠，但视觉上就像“被挤到下一行”。
- 前一个元素用了
grid-row: 1 / span 3，它实际占了第 1、2、3 行 → 后续grid-row: 2的项只能从第 4 行开始渲染（哪怕你没写） - 跨行项 +
grid-auto-flow: row dense会主动填空，把后面 DOM 的项插进前面空隙，导致grid-row指定的“预期位置”被动态覆盖 - 用
grid-row: 2 / 3替代grid-row: 2更安全：明确限定只占第 2 行，避免 span 推导歧义
内容撑破轨道造成“假换行”
你看到的“被排挤到下一行”，可能是内容高度突破了轨道限制，顶开了后续行，让视觉错位。这不是 Grid 排列逻辑问题，而是尺寸失控。
- 设了
grid-template-rows: 60px，但某项内有长文本 → 文本溢出并撑高该行，下面所有项整体下移，看起来像“跳行” - 解决方案：改用
minmax(0, 1fr)或minmax(min-content, 1fr)替代固定像素值 - 对不确定高度的项，加
overflow: hidden和text-overflow: ellipsis控制文字，或配合min-width: 0防止文本撑宽
真正难调试的是那些没报错、也没警告的“视觉偏差”——它往往来自显式轨道缺失、跨格项干扰、或内容尺寸失控三者叠加。打开 DevTools 的网格叠加层，盯着线号和实际内容边界比对着看，比反复改 grid-row 数值更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
