用 fr 单位设 grid-template-columns（如 repeat(3, 1fr)）最对齐，避免固定值+gap导致溢出；子项统一 min-width: 0 和 box-sizing: border-box；auto-fit 适合等宽不留空列，auto-fill 适合保最小列数。
grid-template-columns 怎么设才对齐整列
列宽不一致是网格错位最常见原因。用 fr 单位比 px 或 % 更可靠，它按剩余空间比例分配，自动适应容器变化。grid-template-columns: repeat(3, 1fr) 比 grid-template-columns: 33.33% 33.33% 33.33% 更稳——后者在有 gap 或边框时容易溢出。
注意：如果子项设置了 width 或 min-width，会强行撑开列宽，破坏对齐。建议统一用 min-width: 0 防止内容溢出干扰布局。
- 避免混合使用
fr和固定值（如1fr 200px 1fr）后又加gap，gap 会从总宽中扣除，导致实际可用空间变小 - 响应式场景下，用
minmax(min-content, 1fr)替代纯1fr，防止文字过长时列被拉宽变形 - 调试时打开浏览器开发者工具的“网格叠加层”，勾选“Show line numbers”，能立刻看出列线是否对齐
justify-items 和 justify-self 到底该用谁
justify-items 控制所有子项在行内（inline-axis）的对齐方式，适合统一风格；justify-self 是单个子项覆盖设置，适合局部调整。两者冲突时，justify-self 优先级更高。
常见误区是以为 justify-items: center 就能让所有格子内容居中——其实它只影响子项盒子本身的定位，如果子项内部有浮动、绝对定位或 inline 元素，仍可能视觉偏移。
立即学习“前端免费学习笔记（深入）”；
- 对齐失效时先检查子项是否设置了
margin: auto，它会覆盖justify-self -
justify-items: stretch（默认值）会让子项填满整列，但若子项设置了width，则以 width 为准，不再拉伸 - 想让文字在格子中真正水平垂直居中，得配合
align-items: center+ 内部display: flex; align-items: center; justify-content: center
gap 导致网格线错位？别忽略 box-sizing
gap 是网格容器属性，它在轨道之间插入空白，不影响子项自身盒模型。但如果子项用了 box-sizing: content-box（默认），且设置了 padding 或 border，就会让内容区变窄，视觉上像“没对齐”。
典型现象：三列网格，中间列内容看起来缩进了一截。其实是中间项 padding 比左右大，或 border 宽度不一致，而 gap 只管轨道间距，不管内容渲染。
- 统一给所有网格子项加
box-sizing: border-box，让 padding/border 包含在宽高内 - 避免在子项上设
margin来模拟gap，这会导致网格轨道计算错误，尤其在auto-fit+minmax()场景下易塌陷 -
gap不支持百分比值，写gap: 5%会直接失效，回退到0
auto-fit 和 auto-fill 在响应式对齐中怎么选
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) 是响应式网格常用写法，但 auto-fit 会合并空轨道，auto-fill 则保留所有可能轨道（即使为空）。对齐效果差异明显：前者在小屏下更紧凑，后者可能留白多但列宽更稳定。
比如容器宽 700px，子项最小 250px：auto-fill 生成 3 列（250×3=750 > 700，但轨道仍创建），auto-fit 只生成 2 列并拉伸为 1fr 1fr，视觉更均衡。
- 要“等宽且不留空列”，选
auto-fit - 要“始终保证最小列数”，比如必须显示 4 张卡片，哪怕最后一列空着，就用
auto-fill - 搭配
justify-content: center可让少于满列时整体居中，但注意这会影响gap分布逻辑
box-sizing、min-width、是否意外触发 BFC，还有开发者工具里那个没打开的网格叠加层。动手前先看一眼轨道线，比调十分钟 justify-content 更快。 
