应使用 auto-fit 而非 auto-fill，因 auto-fit 会合并空轨道并均分空间使列撑满整行，auto-fill 则硬塞空轨道导致列变窄、留白甚至横向滚动；minmax(250px, 1fr) 中首参须为长度或百分比，次参仅支持 1fr 或 max-content；子项禁设 width 和 margin，须用 gap 控制间隙，并处理溢出内容。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就行，不需要写任何 @media，浏览器会自己算该放几列。
为什么必须用 auto-fit 而不是 auto-fill
两者都生成轨道，但行为完全不同：
-
auto-fit会合并空轨道，把省下的空间均分给有内容的列，视觉上“撑满整行” -
auto-fill硬塞满所有可能轨道（哪怕没子元素），导致列被虚占、变窄、右侧大片留白，甚至触发横向滚动条 - DevTools 的 Layout 面板勾选 “Show line numbers”，一眼就能看出空轨道有没有被折叠
minmax(250px, 1fr) 两个参数不能乱写
第一个是轨道最小可取值，第二个是单个轨道能拿到的最大份额——不是“最大宽度”：
- 第一个参数只能是
<length></length>（如250px）或<percentage></percentage>，不能是auto或em（字体缩放会干扰列数） - 第二个参数只接受
1fr或max-content，写成2fr或minmax(250px, auto)会被浏览器静默忽略 - 漏掉
minmax()、直接写repeat(auto-fit, 1fr)→ 所有列强行等分，不换行
子项样式一错，整个布局就崩
再对的 grid-template-columns 也救不了子项自己搞砸：
- 子项不能设
width（如width: 300px），否则会撑破网格定义，换行失效 - 别用
margin模拟间隙——gap是 Grid 原生属性；用margin会侵占子项自身宽度，让minmax()的最小值失效 - 长文本、URL、未约束的图片会溢出列宽，得加
overflow: hidden+text-overflow: ellipsis+white-space: nowrap（单行）或img { width: 100%; height: auto; }
真正容易被忽略的是：1fr 总是相对于整个容器宽度计算，不是当前行。所以某行只有一个子项时，它不会只占该行宽度——而是占满整个容器宽度，除非你主动改 grid-auto-flow 或用其他流式逻辑兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
