minmax(200px, 1fr) 即可实现“自适应但有底线”的列宽：最小200px，最大占剩余自由空间的等分份额；Grid列宽由容器轨道定义控制，子项宽度属性基本无效。
grid-template-columns 用 minmax() 实现“自适应但有底线”
直接说结论：minmax(200px, 1fr) 就是你要的写法——列宽至少 200px，剩余空间里它能伸缩占满。不是靠 min-width，也不是靠 flex 那套逻辑，Grid 的响应行为必须在 grid-template-columns 里定义。
常见错误是写成 1fr min-width: 200px（语法非法），或试图用 min-width 单独作用于 grid-column（不生效）。Grid 列宽由容器的列轨道定义控制，子项的宽度属性基本不影响轨道分配。
-
minmax(200px, 1fr)表示：该列最小 200px，最大可取全部可用空间的等分份额 - 多个列都这么写，比如
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr)，它们会平分剩余空间，且各自不低于 200px - 混用时注意顺序：写成
200px minmax(200px, 1fr)，第一列固定 200px，第二列才弹性；反过来写就全弹性了
为什么不用 auto-fit + repeat()？
repeat(auto-fit, minmax(200px, 1fr))) 是更灵活的写法，适合“列数不确定、靠内容撑开”的场景，比如响应式卡片列表。但它和固定列数写法行为不同，容易误用。
典型踩坑：用 auto-fit 却没设容器 width 或父级约束，导致列无限压缩到 200px 后“卡住”，不再新增列——因为没有足够空间容纳新列的最小值。
立即学习“前端免费学习笔记（深入）”；
- 必须确保容器本身有明确宽度（比如
width: 100%或max-width），否则 Grid 无法计算“多少列能塞下” -
auto-fit会合并空轨道，auto-fill则保留空轨道，视觉上可能多出空白列 - IE 不支持
auto-fit和minmax()，如果要兼容，得降级为媒体查询 + 固定列数
fr 单位和像素混用时的隐含约束
1fr 不是“剩下的所有像素”，而是“剩余自由空间等分后的一份”。一旦列中出现固定尺寸（如 200px 或 auto），fr 才开始算剩余部分。这点容易误解，导致布局意外收缩或溢出。
例如：grid-template-columns: 200px minmax(200px, 1fr) 1fr，总自由空间 = 容器宽 − 200px；然后把这剩余空间三等分（两个 1fr 各一份，minmax 的 1fr 也占一份），再和各自的最小值比对取大值。
- 所有带
fr的列共享同一份“自由空间”，不是各自独立计算 -
minmax(200px, 2fr)是合法的，表示它有权拿两份自由空间，但不能低于 200px - 如果所有列都是
minmax(200px, 1fr)且容器太窄（比如只有 350px），那么三列会各取 200px → 总宽 600px > 容器 → 触发横向滚动（而不是自动缩到 116px）
移动端适配时最常漏掉的一件事
很多人写了 minmax(200px, 1fr)，但在小屏上发现列还是被挤变形——根本原因是没加 viewport meta 标签，或者容器父级用了 display: inline-block 等限制宽度的样式，导致 Grid 容器实际宽度远小于视口。
Grid 的自适应完全依赖容器的可用宽度。如果容器被父级压缩、或未设置 box-sizing: border-box 导致 padding 撑出宽度，minmax() 就会在一个比你以为的小得多的空间里计算。
- 务必检查
grid-container元素的 computed width，别只看 CSS 声明 - 移动端建议加
width: 100%和max-width: 100%双保险 - 避免在 Grid 容器上设
padding后又忘了box-sizing: border-box，否则 padding 会额外吃掉自由空间
