移动端Grid列数应设为repeat(auto-fit, minmax(320px, 1fr))，让浏览器依容器宽度自动计算列数：小屏单列、中屏双列、大屏三列以上，空列自动合并不留白；最小值需按场景调整（列表320px、底栏80px、卡片240px），避免过小导致压缩或过大造成浪费。
移动端 Grid 列数怎么设才不压缩也不留白
直接用 repeat(auto-fit, minmax(320px, 1fr))，别写死 repeat(3, 1fr) 或 1fr 2fr 1fr。前者让浏览器按容器宽度自动算列数：小屏（比如 320px 宽）强制单列，375px 屏可能出两列，414px 以上才铺开三列，且空列会被自动合并，不会右侧留白。
常见错误是把 minmax() 的最小值设得太小（如 120px），导致小屏下强行塞进两列，文字挤成一条线；或设得太大（如 400px），在中屏手机上只剩一列，浪费空间。实际项目中，列表项推荐 320px，底栏图标区用 80px，卡片类网格用 240px。
以下情况会失效：
-
grid-template-columns里混写px和fr（如200px 1fr 1fr），小屏下fr可能缩到 0，安卓 WebView 渲染异常 - 父容器没设明确宽度（比如祖先元素是
display: inline-block或未设width），Safari 会静默忽略整条规则 - 用了
clamp()包裹minmax()，Safari 15.4 之前不支持，整条声明被丢弃
gap 和 padding 到底谁来管间距
统一用 gap，别在子项上加 margin。移动端屏幕紧凑，margin 容易撑破容器、触发横向滚动，而 gap 是网格内建间距，不参与子项尺寸计算，更可控。
立即学习“前端免费学习笔记（深入）”；
但注意：gap 用百分比（如 gap: 2%）会触发父容器重排，必须改用 rem 或 px（如 gap: 0.5rem）。iOS 16.4 之前版本中，gap 在滚动容器里还可能引发合成层问题，如果发现列表滚动卡顿，先临时关掉 gap 测一下。
子项内部若需额外留白（比如图标和文字之间），用 padding，不是 margin——后者会影响网格轨道分配。
为什么 iOS Safari 上 Grid 布局突然“消失”了
不是崩溃，是浏览器静默丢弃了整条 grid-template-areas 声明。原因通常是：每行引号里的区域名数量不一致（比如桌面端写 "header nav main aside"，移动端改成 "header" "nav" "main"，漏了 aside 所在行），或者 grid-template-columns 列数和区域字符串行内单词数对不上。
调试时看 computed 样式里 grid-area 显示为 auto，基本就是这个原因。安全做法是：
- 移动端默认写垂直堆叠结构：
grid-template-areas: "header" "nav" "main" "footer" - 大屏再用
@media (min-width: 768px)改成三栏：grid-template-areas: "header header header" "nav main aside" "footer footer footer" - 侧栏要收起时，从字符串里整行移除
aside，而不是用display: none隐藏它——否则它还在布局流里占位
列表页和底栏的 Grid 写法差异在哪
列表页强调纵向阅读节奏，用 auto-fit + minmax(320px, 1fr) 稳；底栏强调触控安全，必须约束子项高度和对齐，光写列不够。
底栏关键三点：
- 子项必须设
min-height: 48px（触控最小安全高度），不能只靠内容撑开 - 文字垂直居中用
display: flex; align-items: center; justify-content: center，别依赖line-height或justify-self——换行就错位 - 图标+文字组合项，优先用
grid-template-areas控制语义顺序（如"icon text"），比硬塞进列轨道更可靠
最易被忽略的是：Grid 不是越“自适应”越好，而是要在最小可触控尺寸（48×48px）、最小可读字号（14px）、最小行高（1.4）约束下做弹性分配。脱离这些物理限制谈 auto-fit，只会换来点不准、看不清、滚不动。
