grid-column: span 3是最稳妥的横跨整行写法，明确跨越3列轨道；若列数动态则用grid-column: 1 / -1或命名轨道如start/end；需配合父容器响应式重定义列模板才能真正全宽。
grid-column: span 完整轨道数是最直接写法
子项要横跨整行，本质是让它跨越父容器定义的所有列轨道。如果父容器写了 grid-template-columns: 200px 1fr 300px（共 3 列），那它就有 4 条列线（1→2→3→4），所以 grid-column: 1 / -1 或 grid-column: 1 / 4 都能撑满。但更稳妥的是用 grid-column: span 3——明确告诉浏览器“跨 3 列”，不依赖线号计数是否出错。
常见错误是只写 grid-column: 1，这等价于 grid-column: 1 / auto，结果只占第一列；或者误以为 grid-column: 1 / -1 在单列模板下也有效，其实它依赖至少两条列线存在。
- 若父容器用
repeat(auto-fit, minmax(300px, 1fr))，列数动态变化，span值无法预设 → 改用grid-column: 1 / -1 - 命名轨道更安全：比如
grid-template-columns: [start] 1fr [main] 1fr [end]，子项直接写grid-column: start / end - 别在子项上写
width: 100%，Grid 轨道已控制宽度，硬设反而可能触发 overflow 或破坏对齐
媒体查询中重置父容器列定义才能真“全宽”
当父容器本身是多列结构（比如主内容 + aside），而你想让某个子项（如 banner）在小屏下无视 aside、真正占满视口宽度，光靠子项自身 grid-column: 1 / -1 不够——因为它的可用宽度仍被父容器的 grid-template-columns: 2fr 1fr 锁死。
必须在 @media (max-width: 849px) 里重写父容器的列定义：
- 把
grid-template-columns改成100% 0px或直接1fr，让 aside 所在列坍缩 - 同步设
column-gap: 0，避免残留间隙 - 子项此时再写
grid-column: 1 / -1，才真正拿到 100% 视口宽度
justify-self/align-self 不影响跨行行为，别混用
justify-self 控制子项在**所在网格区域内的水平位置**，比如居中或右对齐；但它不会改变该区域本身的跨度。即使你给一个只占一列的子项设了 justify-self: center，它也不会自动变宽。
想让子项“视觉上居中撑满”，得先确保它**物理上占满整行**（用上面两种方法之一），再配合 justify-self: center 对齐内容——否则只是在一个窄格子里居中，和“独占整行”完全不是一回事。
- 如果子项本身有
grid-column: 2 / 3，又设justify-self: center，它只会居中显示在第二列里 -
place-self是简写，但同样不扩展轨道，只调整内容在已有区域中的位置 - 跨行子项的对齐基准是它所占整个网格区域的中心，不是内容盒中心；调试时加
outline: 1px solid red能立刻看清
gap 和 margin 混用会导致最后一行错位
用 grid-column: 1 / -1 让子项独占一行后，如果它下面还有其他网格项，且你同时给这些项设了 margin-bottom，就容易出现最后一行底部多出空白，甚至触发 margin collapse。
正确做法是统一用 gap 控制行间距：
- 父容器设
row-gap: 24px，所有行间间隙一致 - 若需某一行上方额外留白，给该子项加
margin-top，但仅限这一处，避免全局混乱 - 特别注意：当父容器是
display: inline-grid时，默认不占满父宽，gap的效果可能被误解——先确认父容器有width: 100%或类似约束
gap 只作用于轨道之间，不干扰子项自身盒模型
span 或 1 / -1，都只是在被压缩的轨道里徒劳拉伸。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
