首项横跨多列时，grid-template-columns 不能写死为 repeat(3, 1fr)，否则 grid-column: 1 / -1 失效；应改用 repeat(auto-fit, minmax(300px, 1fr))) 并配合 span 或响应式 span 值，同时注意 grid-auto-rows 和 grid-auto-flow 的影响。
首项横跨多列时 grid-template-columns 不能写死
直接用 grid-template-columns: repeat(3, 1fr) 会导致首项被强制塞进单列，哪怕你加了 grid-column: 1 / -1 也没用——因为 Grid 轨道数已固定为 3，-1 指向的是第 4 条线，根本不存在。
正确做法是让列轨道动态响应内容：
- 用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))，让浏览器按最小宽度自动算列数 - 首项用
grid-column: 1 / -1横跨所有当前存在的列（不是“全部 3 列”，而是“当前实际渲染出的列”） - 如果必须固定为 3 列布局，改用
grid-template-columns: repeat(3, 1fr)+grid-column: span 3，但要确保容器宽度足够容纳 3 列，否则会换行错乱
首项加 grid-column 后其他项顺序错乱
Grid 默认按源顺序逐个填入轨道，首项占满整行后，第二项会从下一行第一列开始——这看起来像“错乱”，其实是预期行为。但如果你希望第二项紧接在首项下方、仍保持左对齐的卡片流式感，得干预排列逻辑：
- 给容器加
grid-auto-flow: dense，允许 Grid 尝试回填空缺位置（慎用：可能打乱视觉顺序） - 更稳妥的做法是把首项单独抽出来，用
display: grid套一层，主列表用grid-template-columns控制，首项用margin-bottom或gap隔开 - 或者用
grid-row-start显式指定后续项起始行，比如第二项设grid-row-start: 2
响应式下首项横跨失效的常见原因
在媒体查询里只改 grid-template-columns 但忘了同步调整首项的 grid-column，就会出现小屏下首项只跨前两列、留白在右侧。
立即学习“前端免费学习笔记（深入）”；
解决方案是统一用基于轨道数的写法：
- 小屏（2 列）：
grid-template-columns: repeat(2, 1fr)+grid-column: span 2 - 中屏（3 列）：
grid-template-columns: repeat(3, 1fr)+grid-column: span 3 - 避免用
1 / -1，因为-1在不同列数下指向不同轨道线，容易失控
也可以用 grid-column: 1 / -1 配合 grid-template-columns: repeat(auto-fill, minmax(...)))，它天然适配不同列数，但要注意 auto-fill 和 auto-fit 行为差异——前者保留空轨道，后者收缩合并。
卡片高度不一致导致网格塌陷
首项内容多、高度大，其他卡片高度小，Grid 默认按行高对齐，结果出现大片空白或重叠。这不是横跨问题，但常被误认为是布局 bug。
- 给容器加
grid-auto-rows: minmax(min-content, max-content)，让每行高度由最高项决定 - 更常用的是
grid-auto-rows: 1fr，强制所有行等高（适合卡片内容长度接近的场景） - 如果首项必须撑高、其余项保持自然高度，就别用 Grid 做整体布局，改用 Flex + 定位组合更可控
真正麻烦的是跨列项和自动行高交互——grid-auto-rows 对跨行项无效，它的高度只由自身内容决定，不会拉伸同行其他项。
