最可靠的方式是使用 repeat(auto-fit, minmax(200px, 1fr))，它能动态增减列数，每列最小200px且剩余空间均分；auto-fill 会保留空列导致错位，应避免用于响应式布局。
grid-template-columns 用 repeat(minmax()) 实现列数自动适配
直接说结论：用 repeat(auto-fit, minmax(200px, 1fr)) 是最可靠的方式，它能让列数随容器宽度动态增减，且每列最小 200px、剩余空间均分。别用 auto-fill —— 它会渲染空列占位，导致布局“假卡顿”或内容错位。
auto-fit 和 auto-fill 的行为差异必须分清
两者都配合 minmax() 使用，但触发时机和渲染结果完全不同：
-
auto-fit：先按最小宽度（如minmax(200px, 1fr)中的200px）尝试铺满容器，再把所有空列“收掉”，把空间重新分配给有内容的列 -
auto-fill：强行按最小宽度铺满整行，哪怕后面几列没内容也保留空白格子，DOM 结构里存在但视觉为空 - 实际效果上，
auto-fit更符合“响应式列数变化”的直觉；auto-fill适合需要固定网格轨道数（比如做动画占位或预设槽位）的场景
minmax() 里的两个参数怎么选才不翻车
minmax(最小值, 最大值) 不是随便填数字，关键在“最小值是否可压缩”和“最大值是否可伸缩”：
- 最小值建议用固定单位（
px、rem）或min-content，避免用1fr—— 否则最小宽度变成“至少占 1 份”，和最大值冲突，浏览器可能降级为单列 - 最大值优先用
1fr，表示弹性填充；也可用max-content（内容撑开）、fit-content(300px)（上限 300px）等，但要留意 IE 不支持fit-content - 如果最小值设得太小（如
50px），小屏下可能挤出十几列，文字被压扁；最小值设得太大（如300px），中屏就只剩两列，留白过多 —— 建议从200px起调，结合设计稿断点验证
需要精确控制列数上限/下限时怎么办
repeat() 本身不支持条件判断，但可以用 CSS @media 或 clamp() 配合实现软性约束：
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询覆盖：比如默认
repeat(auto-fit, minmax(200px, 1fr))，到max-width: 768px时强制改为repeat(2, 1fr)，确保小屏最多两列 - 用
minmax(clamp(200px, 25vw, 300px), 1fr)替代固定最小值，让最小宽度随视口变化，在中等屏获得更平滑的列数过渡 - 注意：不要试图用
grid-template-columns: repeat(3, 1fr)+grid-auto-flow: column模拟动态列 —— 这会导致内容按列流式排列，顺序错乱，和常规阅读习惯相反
真正难的不是写对这行 CSS，而是理解 auto-fit 在渲染阶段会丢弃空轨道，而 minmax() 的第一个参数决定了“何时开始丢”。很多问题其实出在最小宽度设得比内容还窄，或者忘了加 gap 导致视觉拥挤，误以为是列数没变。
