应优先使用 auto-fit；它会收缩空列使卡片拉伸填满整行，而 auto-fill 保留空轨道易致右侧留白，配合 justify-content 等容器对齐属性才能实现真正居中。
grid-template-columns 用 auto-fit 还是 auto-fill？
对齐响应式网格，关键不在“怎么写样式”，而在 grid-template-columns 中如何选填 auto-fit 或 auto-fill —— 它们行为不同，直接影响卡片是否“居中对齐”或“撑满整行”。
auto-fit 会收缩空列，让剩余项自动拉伸填满容器；auto-fill 则保留所有生成的轨道（哪怕为空），容易在右侧留白，看起来像“没对齐”。
- 想让卡片始终均匀铺满整行宽度 → 用
auto-fit - 需要预留空白格做占位（比如配合 JS 动态插入）→ 才考虑
auto-fill - 常见误判：看到右侧有空隙就改用
auto-fill，结果更糟——其实是没加justify-items: stretch或父容器有 padding 干扰
卡片左右不对齐？检查 justify-content 和 align-content
网格项本身不控制“左右对齐”，真正起作用的是网格容器的对齐属性。很多人只设了 grid-template-columns，却忘了容器级对齐。
-
justify-content: center→ 水平居中整个网格（适合小屏单列时居中） -
justify-content: start→ 左对齐（默认值，但显式写出更可控） -
align-content: start→ 控制多行时的垂直对齐，避免行间空隙被均分 - 如果卡片高度不一致，又想底部对齐，得在
.card上加align-self: end，而不是动容器
响应式断点下对齐错乱，别只靠媒体查询重写 grid-template-columns
直接在媒体查询里重复写 grid-template-columns: repeat(2, 1fr) 看似合理，但容易遗漏 gap、padding 或 max-width 的协同变化，导致视觉偏移。
立即学习“前端免费学习笔记（深入）”；
- 优先用单条自适应声明：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，它本身就能随容器缩放调整列数 - 只在必要时用媒体查询微调：
gap从20px改为12px（小屏紧凑）、max-width从1400px收窄到960px - 特别注意：移动端
padding: 0 16px比padding: 20px更安全，避免左右溢出触发横向滚动条
flexbox 对齐技巧不能直接套用到 grid 容器上
很多开发者习惯用 display: flex + justify-content: center 居中，一换 grid 就照搬，结果失效——因为 grid 的对齐逻辑是二维的，且默认不继承 flex 行为。
-
justify-content在 grid 中只对齐“整行轨道”，不是单个子元素 - 想让某个卡片单独居中？别用容器对齐，给它加
grid-column: 1 / -1（跨全宽）再配text-align: center - 嵌套场景常见坑：卡片内部用 flex 排图标+文字没问题，但外部网格容器不要同时设
justify-content和内部 flex 的justify-content，容易叠加偏移
auto-fit 和 justify-content 的组合效果，不试一次真看不出差别。 
