最可靠的方式是使用 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(最小值, 最大值) 不是随便填数字，关键在“最小值是否可压缩”和“最大值是否可伸缩”：
