grid-row: span 2 是固定跨恰好2行轨道，非最小跨度；它不控制高度，仅指定跨越的轨道数，需配合 grid-template-rows 等显式定义才能可靠生效。
grid-row: span 2 不是设置“最小跨度”，而是固定跨 2 行轨道
很多人看到 grid-row: span 2 就以为它像 minmax(min-content, 1fr) 那样定义“最小”范围，其实不是。grid-row: span 2 是明确声明该元素**必须跨越恰好 2 行轨道（grid lines）**，和“最小”无关。它不参与轨道尺寸计算，也不触发自动扩容——如果目标区域高度不够，内容会溢出或被裁剪。
常见错误现象：
– 元素视觉上只占 1 行高度，但开发者写了 grid-row: span 2
– 紧邻的其他项被挤开、错位，甚至出现空白间隙
– 在响应式布局中突然“断层”，尤其当行高由内容撑开时
- 它作用于 grid item，不是 grid container；必须配合显式定义的行轨道（如
grid-template-rows）才能可靠生效 - 若容器未定义行数（比如只用
auto-fit+minmax()），span 2仍会跨两线，但第二条线位置取决于内容高度，结果不可控 - 不要把它和
grid-row-start / grid-row-end混用：比如同时写grid-row-start: 2和grid-row: span 2，后者会覆盖前者
想让元素“至少占 2 行”，得靠 grid-template-rows + minmax()
真正控制“最小跨度”的地方在容器的 grid-template-rows。例如：
.container {
display: grid;
grid-template-rows: repeat(4, minmax(60px, 1fr));
}
这样每行轨道最小高 60px，无论内容多矮，都撑到 60px；而 grid-row: span 2 的 item 就自然获得至少 120px 高度。
- 用
minmax(<strong>min</strong>, <strong>max</strong>)才是约束“最小尺寸”的正解，span只管“跨几条线” - 如果行数不确定，优先用
auto-fit或auto-fill配合minmax()，而不是硬写span 2去“凑高度” - 注意
minmax(0, 1fr)是无效写法，min不能为 0（除非用min-content或fit-content(…)）
span 2 在隐式网格中可能创建意外空行
当容器没设 grid-template-rows，仅靠内容生成隐式行轨道时，grid-row: span 2 会强制拉出至少 2 行——哪怕其他项都只占 1 行。这容易导致底部多出大片空白，尤其在动态插入 item 的场景下。
- 检查是否真需要隐式网格：多数业务布局建议显式定义
grid-template-rows范围 - 用
grid-auto-rows: 1fr可约束隐式行高度，但它对span 2的“起始线”位置无影响，仍可能撑高整个容器 - 调试技巧：在浏览器开发者工具中勾选“Show line numbers”（Grid overlay），一眼看出 span 跨了哪两条线
替代方案：用 align-self + min-height 更可控
如果目标只是“视觉上不低于 2 行高度”，且不需要严格网格对齐，直接给 item 设 min-height 往往更简单、兼容性更好：
.item {
min-height: calc(2 * 1.5em + 2 * 8px); /* 假设行高 1.5em，上下 padding 各 8px */
align-self: start;
}
- 避开 Grid 行轨道计算逻辑，不依赖父容器模板定义
- 在 Flex 容器或普通块级流中也能复用这套思路
- 注意
align-self: stretch（默认值）在 Grid 中会让 item 拉满所在轨道高度，此时min-height才真正生效；若设了align-self: start，就得靠自身min-height主动撑开
真正难的不是写 span 2，而是搞清你到底要控制“轨道数量”还是“视觉高度”。前者看线，后者看像素——混用就容易卡在奇怪的空白里，半天看不出哪条规则在起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
