正确写法是minmax(200px, 1fr)，因1fr无最小宽度限制，仅表示等分剩余空间；minmax()才真正保证列宽不小于200px且可随容器扩展。
直接用 minmax()，别写 200px 1fr 这种错误组合——它不保最小，只让第二列无限压缩。
为什么 minmax(200px, 1fr) 才是正确写法
很多人误以为 200px 1fr 表示“一列固定 200px，另一列弹性但至少 200px”，其实不是：1fr 本身没有下限，容器窄时会被内容撑开或被强制压缩到文字无法换行的程度。
-
minmax(min, max)是轨道尺寸范围定义：浏览器先按min分配基础空间，再在剩余可用空间允许时往max扩展 - 写成
minmax(200px, 1fr)才真正保证该列「不会小于 200px」，且能随容器变宽而拉伸 - 若想限制上限（比如不让某列超过 600px），就写
minmax(200px, 600px)，1fr不是必须项
repeat(auto-fit, minmax()) 实现响应式列数控制
商品卡片、文章列表这类不需要预设列数的场景，硬写 repeat(4, 250px) 会破坏响应性；auto-fit + minmax() 才是解法。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))—— 每列至少 250px，容器够宽就多铺一列，不够就自动减少列数并拉伸剩余列 -
auto-fit会合并空轨道，auto-fill则保留（哪怕不可见），适合需要对齐的网格表单 - 如果列内有图片，记得加
img { max-width: 100%; height: auto; }，否则图片会突破minmax()的约束
fr 单位和最小宽度的冲突点在哪
1fr 不等于“最小 1fr”，它只是“等分剩余空间”的比例系数。实际渲染中，列宽可能被内容撑大（比如长单词、未设 max-width 的图片），导致布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 给网格项加
min-width: 0可强制允许收缩，但治标不治本 - 更稳妥的是避免纯
1fr，改用minmax(200px, 1fr)或minmax(min-content, 1fr)（不过min-content在不同浏览器行为不稳定） - 若列里含文本块，建议同时设
word-break: break-word或overflow-wrap: break-word防止溢出
别用 auto 或隐式值假装能控最小宽度
grid-template-columns: 200px auto 150px 看似简洁，但 auto 等价于 minmax(min-content, max-content)，完全由内容决定，既不响应式也不可控。
- 想让中间列“至少 200px，最多自适应”，必须显式写
minmax(200px, 1fr) - 想让它“至少 200px，最多 600px”，就写
minmax(200px, 600px) -
max-content和min-content可用于特殊场景（如表格首列对齐），但不能替代minmax()做最小宽度兜底
真正容易被忽略的是：即使写了 minmax(200px, 1fr)，如果子元素没设 min-width: 0 或没处理好内联内容（比如未约束的图片、长 URL），列依然可能撑开或崩溃。最小宽度不是 CSS 自动施加的铁律，而是浏览器在约束范围内做的最优分配——你得把所有环节都卡住。
