grid-template-columns 不能直接配合 justify-content: space-between 实现动态两端对齐，因其仅在列轨道总和小于容器宽度时分配空闲空间，而固定列宽下无法响应缩放；应改用 fr 单位、minmax() 或显式 grid-column 跨列控制。
grid-template-columns 不能直接配合 justify-content: space-between 工作
很多人试过给 display: grid 容器加 justify-content: space-between，发现第一行两端对齐了，但第二行开始就错位——甚至最后一行只剩一个子项时，它会孤零零卡在最左边。这不是 bug，是 Grid 的默认行为：space-between 只作用于「整行的可用空间分配」，而 Grid 行内子项的起始位置由 grid-template-columns 显式定义，列轨道一旦固定，子项就严格按轨道放置，不会为了“撑开两端”去动态调整列宽。
真正起作用的是列轨道本身的弹性或自适应能力。
- 用
fr单位替代固定像素/百分比（如1fr 1fr 1fr），让列自动均分剩余空间 - 搭配
gap控制间距，而非依赖justify-content去“推”元素 - 如果列数不固定，优先用
repeat(auto-fit, minmax(200px, 1fr)))，让 Grid 自动计算能放几列
justify-content: space-between 在 grid 中生效的前提
它只在「容器有额外空闲主轴空间」且「所有列轨道总和小于容器宽度」时才可见效果。比如你设了 grid-template-columns: 100px 100px 100px，容器宽 600px，那就有 300px 空闲空间，justify-content: space-between 才会把三列往两边推，中间留空。但此时每列还是死死卡在 100px，无法响应内容或窗口缩放。
- 固定列宽 + space-between = 静态布局，适合卡片宽度一致、数量确定的场景
- 列宽用
minmax()或fr+ space-between = 动态布局，但 space-between 效果常被覆盖，实际靠轨道弹性实现“视觉两端对齐” - 移动端慎用 space-between，小屏下轨道压缩后空闲空间消失，对齐失效
真正可靠的两端对齐方案：justify-items + grid-column
当你要的是“每行首尾两个子项贴住容器边缘”，而不是“列之间均匀留空”，更稳的方式是放弃 justify-content，改用 justify-items: stretch（默认值）+ 显式控制首尾项的列跨度。
例如三列布局中让第一个和最后一个子项横跨全部列：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid > :first-child {
grid-column: 1 / -1;
}
.grid > :last-child {
grid-column: 1 / -1;
}
-
grid-column: 1 / -1表示从第一根线到最后一根线，即占满整行 - 中间项保持默认
grid-column: auto，自然按轨道排列 - 此法不依赖空闲空间，响应式下依然稳定
容易被忽略的 gap 和 inline-size 冲突
用 gap 设置行列间距时，如果同时设置了 inline-size（或 width）且值刚好等于“列宽 × 列数 + gap × (列数 − 1)”，那 justify-content: space-between 就完全没空间可分配，表现和 flex-start 一样。
- 检查开发者工具里容器的
used width和content box是否一致 - 临时删掉
gap看对齐是否恢复，能快速定位是不是间距吃掉了空闲空间 - 用
min-width: 0防止子项内容溢出挤压轨道（尤其含图片或长文本时）
Grid 的“两端对齐”本质是轨道分配问题，不是对齐属性开关。写死列宽就别指望 space-between 救场，该用 fr 就用 fr，该显式跨列就跨列，别在 justify-content 上反复试错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
