最稳的起点是repeat(auto-fit, minmax(200px, 1fr)))，它让grid自动计算列数，避免小屏压缩和大屏留白；auto-fit合并空轨道，minmax中最小值需按内容调整，禁用fr与px混写，慎用media query。
grid-template-columns 在移动端多列布局中怎么设才不崩
直接说结论：grid-template-columns 用 repeat(auto-fit, minmax(200px, 1fr))) 是最稳的起点，不是 repeat(3, 1fr) 或 2fr 1fr 这类固定列数写法。
移动端屏幕宽度变化大，固定列数会出两种问题：小屏下内容被强行压缩（文字挤成一团），大屏下留大片空白（列数没跟上）。auto-fit + minmax() 让 Grid 自己算该放几列，才是真自适应。
-
minmax(200px, 1fr)中的200px是单列最小宽度，低于它就自动减少一列；可根据内容调整，卡片类常用240px，文字流可用160px -
auto-fit会合并空余轨道，auto-fill则保留空轨道——多数场景选auto-fit，避免右侧留白 - 别在
grid-template-columns里混用fr和px（比如200px 1fr 1fr），小屏下fr可能缩到 0，触发渲染异常
为什么 max-width + grid-template-columns 配合 media query 反而更麻烦
很多人想“先写死三列，再用 @media 改成两列、一列”，结果维护成本高、断点难调、漏覆盖某些设备宽度。
纯 CSS Grid 自适应方案本身就能覆盖大部分分辨率，加 media query 属于叠床架屋。只有当需要做「质变」时才值得介入，比如：从卡片网格切到垂直时间线，或启用 sidebar。
- 常见误操作：写一堆
@media (max-width: 768px) { grid-template-columns: 1fr; }，但实际 680px 宽的平板可能还撑得下两列 - 真正该加 media query 的地方是控制
gap大小（小屏减gap防溢出）或grid-auto-rows（防止高度塌陷） - 如果必须用断点，优先用
min-width而非max-width，符合渐进增强逻辑
grid-template-columns 在 Safari 上不生效？检查这几个地方
Safari 对 Grid 的解析比 Chrome 严格，尤其老版本（iOS 14.5 之前）对 auto-fit 支持不稳定，常见表现是直接回退成单列或报错忽略整条规则。
- 确认父容器有明确宽度（不能依赖
width: fit-content或未设display: grid的祖先） - 避免在
grid-template-columns中使用clamp()—— Safari 15.4 之前不支持，会整个声明失效 - 如果用了
grid-template-areas，确保grid-template-columns定义的列数和 areas 中每行字符数一致，否则 Safari 直接静默失败 - 调试技巧：临时加上
border: 1px solid red到 grid 容器，看是否真的没渲染 grid，还是子项没撑开
内容少于一整行时，如何让列宽依然均匀
默认情况下，auto-fit 遇到内容不足一整行，会把所有列收缩到 minmax() 的最小值，看起来像“挤在一起”，而不是“平均分满整行”。
这不是 bug，是 Grid 按轨道定义分配空间的正常行为。要视觉上撑满，得靠额外约束：
- 给子项加
min-width: 0（防文本撑宽导致列宽不均） - 配合
justify-content: stretch（Grid 容器上），确保子项拉伸填满轨道 - 如果子项是图片或卡片，确保它们没有
max-width: 100%类样式干扰 Grid 分配逻辑 - 极端情况可改用
grid-template-columns: repeat(3, 1fr)+grid-auto-flow: column，但失去响应式弹性，慎用
最常被忽略的是：Grid 的响应能力取决于你给的「最小约束」是否合理，而不是写了多少个 @media。列数由内容决定，不是由设计师稿子上的“iPhone 尺寸”决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
