repeat(auto-fit, minmax(300px, 1fr))) 能自动响应式布局，因浏览器实时计算每列最小300px、最多均分剩余空间，依据容器宽度动态调整列数；auto-fit收缩空轨道，更符合“有几项显几项”逻辑。
直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 就能搞定，不用写媒体查询也能自动响应；但真要兼容老 Safari 或设计有强约束（比如 iPad 竖屏必须单列），就得补 @media 断点。
为什么 repeat(auto-fit, minmax(300px, 1fr)) 能自动切换
这行代码不是“猜屏幕尺寸”，而是让浏览器实时计算：每列至少 300px 宽，最多占满剩余空间；容器能塞下几列就塞几列。小屏下 300px × 2 > 可用宽度 → 自动退为 1 列；中屏刚好两列；大屏可能三列甚至四列（除非你加了 max-width 限制）。
-
auto-fit会收缩空轨道，auto-fill则保留所有预分配列——后者在内容少时容易留白，不符合“有几项显几项”的直觉 - 300px 是最小可交互阈值：设太小（如 200px）可能在部分安卓 WebView 里误判为可双列，导致布局撕裂；设太大（如 400px）则小屏出现横向滚动
- 不需要改
gap、grid-auto-rows或justify-content，除非你明确需要居中对齐或等高控制
@media 断点只重写 grid-template-columns 就够了
很多人写了媒体查询却没效果，八成是因为多写了、写错了，或者漏了关键前提。移动端强制单列，只需在断点内覆盖这一行：
- 正确写法：
@media (max-width: 600px) { grid-template-columns: 1fr; }—— 简洁、合法、无歧义 - 错误写法：
grid-template-columns: 100%（语法非法）、1fr 0fr（冗余）、repeat(1, 1fr)（绕远路） - 断点别硬套设备尺寸：用
600px比768px更稳妥，避开 iPad 竖屏卡在两列的尴尬；也可用@media (max-width: calc(100vw - 2rem))动态兜底 - 只改这一行，其他属性（如
gap、padding）保持原样——除非父容器在 PC 端被max-width挤压导致掉行，那才需要同步调
移动端单列失效？先查这三处
写了正确 CSS 却还是双列？大概率不是 Grid 写错了，而是底层结构或继承干扰了渲染：
- 父容器没撑开：检查是否被
overflow: hidden裁剪，或外层用了display: inline-grid；DevTools 里看 computed 的grid-template-columns是否显示为1fr，而不是none - 表单项没封装好：把
<label></label>和<input>扁平丢进一个div.grid，Grid 会把每个标签当独立 item 处理，导致 label 换行、input 悬空 - 第三方样式覆盖：比如某个 UI 库写了
.form input { display: inline-block }，优先级高于你的 Grid 布局，得用更高 specificity 或!important覆盖
真正难的从来不是那行 minmax() 怎么写，而是确保每个子项是语义完整的独立单元、父容器宽度干净、且没有隐藏的样式劫持。auto-fit 在 iOS 14.5 之前的 Safari 上支持不稳定，如果项目必须兼容，就别省那几行媒体查询。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
