最稳妥写法是grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))，最小宽度防挤压，1fr确保同排均分；小屏、平板、桌面分别设160px、220px、250px最小宽；需精确断点时用媒体查询覆盖；IE需@supports降级为float/flex。
用 repeat(auto-fit, minmax(...)) 实现等分响应式网格
直接上最稳妥的写法：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))。它会让每个网格项最小 250px，超出就自动换行，剩余空间均分给所有同排项。比 auto-fill 更实用，因为 auto-fit 会把空列塌缩掉，视觉上真正“等分”。
minmax() 里两个参数怎么选才不踩坑
第一个参数是单格最小宽度，别设太小（比如 100px），否则小屏下可能挤出横向滚动条；第二个参数用 1fr 是关键——它让所有同排项平分剩余空间，不是固定像素。如果写成 minmax(250px, 300px)，那就失去等分能力，变成“至少 250、最多 300”，容易留白或溢出。
- 小屏手机（
max-width: 480px）：设minmax(160px, 1fr)，保证单列不被压扁 -
平板（
481px–768px）：升到minmax(220px, 1fr)，撑开两列 - 桌面端：统一用
minmax(250px, 1fr)，三列起稳定
为什么不用媒体查询也能 work，但加了更可控
纯 auto-fit + minmax 已经能响应视口变化，但实际项目中常要微调断点：比如在 768px 强制从 2 列跳到 3 列，而自动计算可能在 742px 就跳了，体验毛刺。这时加一层 @media (min-width: 768px) 覆盖 grid-template-columns，就能卡死行为。
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)));
@media (min-width: 768px) {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
}
IE 不支持 auto-fit？那就得降级处理
IE11 及更早版本完全不认识 auto-fit 和 minmax()，会直接忽略整条 grid-template-columns 声明，退化成块级流。如果必须兼容 IE，得用 @supports 隔离：
@supports (display: grid) and (grid-template-columns: repeat(auto-fit, 0fr))) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
}
/* IE 下 fallback 用 float 或 flex */
.grid-item { width: 100%; }
@media (min-width: 480px) { .grid-item { width: 50%; } }
@media (min-width: 768px) { .grid-item { width: 33.333%; } }
真正难的不是写对语法，而是想清楚「最小内容宽度」和「设计断点」之间差了多少——这个 gap 决定了你是否需要媒体查询兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
