justify-content 和 align-content 设为 space-between 无效，是因为 justify-content 仅在单行网格生效，align-content 仅在多行网格且有剩余空间时生效；两者同时无效通常因网格仅一行/一列或轨道已撑满容器。
justify-content 和 align-content 都设成 space-between 为什么没效果
因为 justify-content 只在**单行网格**（即 grid-template-rows 或 grid-template-columns 只定义了一条轨道）中起作用；而 align-content 只在**多行网格**（有多条显式或隐式轨道，且总高度/宽度小于容器）时才生效。两者同时设为 space-between 却没反应，大概率是：容器里只有一行/一列子项，或者网格轨道已撑满容器，没留下可分配的剩余空间。
想让子元素在容器内自动等距分布，该用哪个属性
取决于你想要的方向和布局结构：
- 水平方向等距（左、中、右对齐）→ 用
justify-content: space-between，但前提是display: grid容器的grid-template-columns没把列宽写死（比如别用1fr 1fr 1fr这种均分写法），而是留出“自由空间”，例如：grid-template-columns: auto 1fr auto，再配合justify-content: space-between - 垂直方向等距 → 同理，用
align-content: space-between，但必须满足：有多行（grid-auto-rows或grid-template-rows定义了 ≥2 行），且所有行加起来高度 - 真正“自动分配间距”且兼容单/多子项 → 更可靠的做法是改用
gap+place-content组合，或直接放弃 grid，用flex的justify-content: space-between+flex-wrap: wrap
space-between 在 grid 中的实际表现边界
它不会压缩子项，也不会拉伸子项；它只把**剩余空白**平分到子项之间（首尾不留空）。这意味着：
- 如果只有 1 个子元素，
space-between完全无效（无“之间”可分） - 如果有 2 个子元素，空白只出现在它们中间，左右贴边
- 如果有 3 个，会生成 2 段等长间隙，首尾仍贴边
-
gap是更可控的替代方案：它强制在每个相邻项之间插入固定间距，不受子项数量或容器剩余空间影响
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 24px; /* 所有方向间隙统一，稳定可预期 */
}为什么 align-content 不如 justify-content 常用
因为绝大多数网格布局默认是单行（由 grid-template-rows 显式控制），即使写了 grid-auto-rows: 100px，只要内容没触发换行，align-content 就不生效。常见误判场景：
立即学习“前端免费学习笔记（深入）”；
- 用了
grid-template-rows: 100px，但只放了一个子项 → 实际还是单行，align-content失效 - 写了
grid-auto-flow: row dense却没设置grid-auto-rows→ 隐式行高度为auto，无法积累出“多行+未填满”的条件 - 容器设置了
height: 100%但父容器没给高度 → 网格高度计算为 0，自然也没空间可分配
真要靠 align-content 分配垂直间距，得明确构造多行且留白：比如 grid-template-rows: repeat(3, 80px) + 容器 height: 300px → 剩余 60px 被 space-between 分成两段 30px 间隙。
