grid-column: 1 / -1是最直接可靠的方式，让网格项横跨容器所有列轨道，从第一列线开始至最后一列线结束，不受列数动态变化、gap或grid-auto-flow影响。
给 grid item 设 grid-column: 1 / -1
这是最直接、最可靠的方式，让某一项横跨容器所有列轨道，无论列数是否动态变化。它不依赖内容、不触发重排、也不受 grid-auto-flow 或 minmax() 计算干扰。
-
1表示从第一列线开始，-1表示到最后一列线结束（即容器右边缘） - 即使你用
repeat(auto-fit, minmax(200px, 1fr)))动态生成列数，grid-column: 1 / -1依然生效 - 该声明优先级高于
grid-template-columns的隐式轨道分配，会强制“破格”占据整行 - 注意：如果父容器有
gap，该项实际宽度 = 容器内宽 − gap 总和（gap 是列间间隙，不影响列线编号）
为什么不用 width: 100% 或 flex-basis: 100%
Grid 布局中，width 和 flex-basis 对 grid item 完全无效——它们只在 Flex 上下文起作用。强行写只会被忽略，或因其他样式冲突导致意外偏移。
-
width: 100%在 Grid 中既不控制列跨度，也不影响轨道分配，纯属冗余 -
flex-basis只对display: flex子项有意义；Grid item 没有主轴/交叉轴的 flex 行为，设了也无反应 - 常见错误：把 Grid 当 Flex 用，在 Grid 容器里给子项写
flex: 1，结果布局错乱且控制失效
配合 justify-self 或 margin 微调对齐
默认情况下，grid-column: 1 / -1 的项会按容器 justify-content 对齐（如 start、center）。若需单独控制该项对齐，用 justify-self 更精准。
-
justify-self: start→ 左对齐（无视容器的justify-content） -
justify-self: end→ 右对齐 - 避免用
margin-left: auto+margin-right: auto居中：它在 Grid 中虽能工作，但语义不清，且在旧版 Safari 中可能失效 - 如果该项是标题或分隔线，建议额外加
margin-top: 0; margin-bottom: 0，防止被相邻项的gap或margin拉开距离
多行 Grid 中如何确保“整行”指当前行而非整个容器？
当容器有多行（比如设置了 grid-template-rows: repeat(3, 1fr)），grid-column: 1 / -1 默认仍跨**所有列**，但只占**所在行的高度**。如果你希望它纵向也撑满整行高度，得配 align-self: stretch 或显式 grid-row。
- 仅横向占满：只需
grid-column: 1 / -1 - 同时纵向撑满单行：加
align-self: stretch（默认值，通常不用写） - 跨多行（比如横跨第2、3行）：写
grid-row: 2 / 4，注意行号从 1 开始，4表示第4条线（即第3行末） - 关键陷阱：别混淆
grid-row和grid-area—— 后者是简写，容易漏掉grid-column导致覆盖行为
1 / -1，别碰 width/flex 相关属性；需要纵向控制时，优先用 align-self 或 grid-row，而不是 height 百分比——后者在 Grid 中常因未设容器高度而失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
