移动端应使用grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))，确保每列最小250px、超出自动换行；断点按内容宽度设为640px（单列）和1024px（三列），避免设备型号依赖。
移动端 grid-template-columns 怎么设才不崩
直接用 grid-template-columns: repeat(4, 1fr) 在手机上肯定挤成一团。关键不是“加 media query”，而是先选对列数和单位——移动端优先用 minmax() + auto-fit，避免硬写死列数。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))是最稳的起点：每列至少 250px，超出就自动换行，空余空间均分 - 别用
repeat(3, 1fr)这类固定列数，小屏下子项会被强制压缩，文字折行错乱 - 如果内容高度差异大，记得加
grid-auto-rows: minmax(100px, auto)防止某一行被拉得过高
media query 里改 grid-template-columns 的临界点怎么选
别按设备型号写断点（比如 “iPhone X”），按内容撑开的实际宽度定。主流做法是两个断点：640px 切单列，1024px 切三列，中间留双列过渡。
/* 默认移动优先：单列 */
.container {
display: grid;
grid-template-columns: 1fr;
}
<p>/<em> 平板窄屏：双列 </em>/
@media (min-width: 640px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}</p><p>/<em> 桌面：三列或四列 </em>/
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}</p>
- 640px 对应常见竖屏平板最小宽度，也兼容大部分折叠屏展开前状态
- 1024px 是桌面浏览器默认最小宽度，比 “768px” 更可靠——很多安卓平板报告的是 768px，但实际可用宽度常不足
- 如果用了
gap，记得在断点里同步检查是否需要调小，否则小屏 gap 会吃掉太多空间
为什么加了 media query 还是不生效
大概率是 CSS 优先级或语法写错了。Grid 布局本身不触发重排，但断点失效往往卡在这几个地方：
- 媒体查询写在了其它规则后面，又被更靠后的同名规则覆盖——把所有
@media块统一放在文件末尾 - 写了
@media screen and (max-width: 639px)却漏了screen，部分安卓 WebView 会直接忽略 -
grid-template-columns被 inline style 或 JS 动态设置覆盖，用 DevTools 的 Computed 面板看最终生效值 - 父容器没设
display: grid，只改了子项的列定义，毫无作用
grid-template-columns 用 fr 和 % 混用会出什么问题
混用会破坏网格算法的自动计算逻辑，尤其在响应式场景下容易导致列宽意外坍缩或溢出。
-
grid-template-columns: 2fr 1fr 30%是非法写法，浏览器会静默忽略整条声明 -
grid-template-columns: 2fr 1fr和grid-template-columns: 66.66% 33.33%表面效果相似，但后者无法响应容器 resize，且百分比在 flex/grid 混合布局中极易错位 - 唯一安全的混合是
minmax(200px, 1fr)+auto（比如侧边栏固定宽，主内容自适应）
真正麻烦的是嵌套 grid 容器的断点同步——外层改了列数，内层如果也依赖外层宽度做计算，就得额外加一层 media query 或改用 clamp() 控制子项最大宽。这个细节多数人一开始都忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
