直接用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))即可实现按容器宽度自动增减列数的响应式布局，无需媒体查询；其核心在于auto-fit折叠空轨道、minmax()设定每列最小宽度与弹性上限，使浏览器动态计算并均分剩余空间。
直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 就能实现真正按容器宽度自动增减列数的三栏（或更多）响应式布局，不用写一堆媒体查询断点——但前提是理解 auto-fit 和 minmax() 的协作逻辑，否则容易卡在“小屏还是三列”或“右侧多出空白”的问题上。
为什么 repeat(auto-fit, minmax()) 是核心写法
这不是语法糖，而是两个机制咬合工作的结果：auto-fit 负责折叠空轨道，minmax(300px, 1fr) 给每列设下限和弹性上限。浏览器会不断尝试：当前容器宽度最多能塞下几个「至少 300px」的列？能塞 3 个就渲染 3 列，只能塞 1 个就只渲染 1 列，多余空间由 1fr 均分。
-
auto-fill会强行占满所有可能列位（哪怕没内容），导致小屏出现横向滚动条或右侧大片留白 -
minmax()必须成对出现，单独写auto-fit或只写300px都无效 - 父容器必须有
display: grid，且不能设置grid-template-rows固定高度干扰列计算
小屏没塌成一栏？先查这三个地方
常见现象是手机上看还是三列挤在一起，文字换行混乱。根本原因不是 Grid 不响应，而是约束条件没松动：
-
minmax()第一个参数设太高（比如minmax(400px, 1fr)），而手机视口宽度通常只有 375px–414px - 外层容器被
max-width: 1200px锁死，又没配width: 100%，Grid 实际计算宽度远大于屏幕 - 父级或祖先元素有
white-space: nowrap或overflow: hidden，截断了 Grid 的自动换行行为
调试时直接打开开发者工具，在 Elements → Styles 面板里看 computed 的 grid-template-columns 值，它会显示浏览器最终解析出的列数和宽度，比猜更准。
中间栏固定宽、两边自适应，别硬套 auto-fit
repeat(auto-fit, ...) 只接受单一轨道定义，没法混写 200px 1fr 200px 这种结构——语法直接报错。真要固定中间或侧边栏，就该放弃 auto-fit，改用明确声明：
- 左右固定 + 中间自适应：
grid-template-columns: 200px 1fr 250px - 左侧固定 + 中右弹性分配：
grid-template-columns: 200px 1fr 2fr - 再配合媒体查询降级：
@media (max-width: 768px) { grid-template-columns: 1fr; }
注意：固定像素值（如 200px）比百分比更可控，避免小屏下侧栏被压缩到看不见；中间用 1fr 而非 auto，防止内容撑开列宽破坏整体结构。
Safari 旧版本不支持 auto-fit 怎么办
iOS 10 / Safari 10.1 之前只认 auto-fill，且 minmax() 行为不稳定。务实做法不是 polyfill，而是用 @supports 做特性检测：
/* 默认 fallback 到 flex-wrap */<br>.container {<br> display: flex;<br> flex-wrap: wrap;<br>}<br>.item {<br> flex: 0 0 calc(33.333% - 20px); /* 手动算间距 */<br>}<br><br>@supports (grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))) {<br> .container {<br> display: grid;<br> grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)));<br> gap: 20px;<br> }<br> .item { flex: none; }<br>}
关键点在于：不要试图让旧浏览器“模拟” Grid 行为，而是提供一套语义一致、视觉可接受的降级方案——flex-wrap + calc() 虽土，但稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
