grid-column: 1 / -1 是唯一可靠写法，直接锚定容器最左和最右列线，不受列数变化或 gap 影响；justify-self 或 margin-auto 不推荐，因不保证占满整行且兼容性差；多行需显式用 grid-row；标题类元素需重置 margin 防 gap 干扰。
grid-column: 1 / -1 是唯一可靠写法
别试 width: 100%、flex-basis: 100% 或 grid-column: 1 / 4（假设 3 列），这些要么被忽略，要么在列数变化时失效。grid-column: 1 / -1 直接锚定到容器最左和最右的列线，不管 grid-template-columns 是 repeat(3, 1fr) 还是 repeat(auto-fit, minmax(200px, 1fr)))，它都生效。
注意：-1 指的是最后一列线（即容器右边界），不是“倒数第一条线”。如果父容器有 gap，该项实际宽度 = 容器内宽 − 所有列间 gap 总和，但列线编号不受 gap 影响。
为什么 justify-self 或 margin-auto 不推荐
justify-self: center 或 margin-left: auto; margin-right: auto 确实能让项居中，但它们不保证“占满整行”——只是居中一个可能很窄的盒子。更关键的是，margin: auto 在旧版 Safari 中对 Grid item 支持不稳定，且语义上模糊：你想要的是跨度控制，不是外边距对齐。
真正需要单独控制对齐时，用 justify-self 配合 grid-column: 1 / -1：
-
justify-self: start→ 左对齐（无视容器的justify-content） -
justify-self: end→ 右对齐 -
justify-self: stretch→ 默认行为，撑满整行宽度（通常不用显式写）
多行 Grid 中只占当前行，不跨行
grid-column: 1 / -1 默认只影响横向跨度，纵向仍按所在行高度渲染。如果你希望它也撑满单行高度，不需要额外设置——align-self: stretch 是默认值，只要没被子项自己设成 start 或固定 height 就会生效。
若需跨多行（比如横跨第 2、3 行），必须显式加 grid-row：
-
grid-row: 2 / 4→ 从第 2 条行线开始，到第 4 条行线结束（即占第 2、3 行） - 行号从 1 开始计数，
/ 4表示终点是第 4 条线，不是第 4 行
标题/分隔线类元素要防 gap 干扰
当 grid-column: 1 / -1 的项是标题或 <hr>，相邻网格项若有 gap，它本身不会受 gap 影响（因为跨了所有列），但上下可能被其他项的 margin 或容器 gap 拉开距离。
稳妥做法是主动重置：
- 加
margin-top: 0; margin-bottom: 0 - 避免依赖父容器的
row-gap去“分隔”，改用该项自身的padding控制留白
真正容易被忽略的点是：grid-column: 1 / -1 能破格占满，但它不改变轨道分配逻辑——如果父容器用的是 grid-auto-flow: column，这条规则会失效；必须确保容器是默认的 row 流向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
