小屏幕下应优先用repeat(auto-fit, minmax(280px, 1fr)))实现响应式单列，配合调小gap、必要时切换grid-auto-flow，并约束grid-auto-rows防止隐式轨道失控。
小屏幕下 grid-template-columns 多列变单列很常见，但别直接写 1fr
直接用 grid-template-columns: 1fr 确实能强制单列，但会丢失响应式弹性——比如内容本身很窄时，它仍会撑满整行，浪费空间。更稳妥的做法是用 minmax() 配合 auto-fit 或 auto-fill，让浏览器自动计算可容纳的最小列数。
实际建议：
- 优先用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))))—— 小屏下每列至少 280px，不足就自动回退为 1 列 - 避免在媒体查询里重复定义整个
grid-template-columns，除非你明确要固定列数（如从 4 列强制切到 2 列） -
auto-fit会把剩余空间分给现有列，auto-fill则保留空轨道，日常布局推荐auto-fit
媒体查询中改 grid-column-gap 比改 columns 更影响体验
很多人只关注列数变化，却忽略间隙（gap）在小屏上容易造成挤压或溢出。比如桌面设 grid-column-gap: 2rem，小屏不调小，两侧 padding 再一加，内容可能直接被挤出视口。
关键调整点：
立即学习“前端免费学习笔记（深入）”；
- 小屏下把
grid-column-gap降到0.75rem或1rem，必要时连grid-row-gap一起调，保持垂直节奏 - 如果用了
gap简写，注意它同时作用于行列，小屏下建议拆成column-gap和row-gap单独控制 - 某些安卓 WebView 对
gap支持不稳定，小屏兜底可加grid-column-gap: 1rem+grid-row-gap: 1rem
@media 中重设 grid-area 很少必要，但 grid-auto-flow 可能需要切换
grid-area 是静态定位声明，媒体查询里反复重写既难维护，又容易覆盖原意。真正值得在断点里动的是自动布局行为。
典型场景：
- 桌面用
grid-auto-flow: row（默认），小屏内容变长后，想让新项目“往下堆”而不是“往右延”，保持阅读流，就不用动 - 但如果用了
grid-auto-flow: column做横向瀑布流，小屏必须切回row，否则项目会横向溢出 - 配合
grid-template-rows: auto使用时，grid-auto-flow: row dense能更好利用碎片空间，但小屏慎用——dense 可能打乱 DOM 顺序，影响可访问性
别忘了 grid 的隐式行/列在小屏下容易失控
当子项数量超出显式网格范围，浏览器会自动生成隐式轨道。桌面看着正常，小屏因容器变窄，grid-auto-columns 或 grid-auto-rows 若没约束，可能生成极宽或极高轨道，导致滚动异常或空白大片。
防御性写法：
- 小屏下显式设
grid-auto-rows: minmax(56px, auto)，防止高度塌陷或爆炸 - 若子项有固定宽高，用
grid-auto-columns: 100%强制占满，比依赖隐式行为更可控 - 检查 DevTools 的 Layout 面板，看是否有灰色“implicit”轨道被意外创建——那是隐式网格在作祟
minmax() 里第一个参数（最小值）是否真适配了最小设备宽度。比如设了 minmax(320px, 1fr)，但 iPhone SE 屏宽只有 320px（含安全区），内容+padding+gap 一叠加，立刻溢出。这个数字得留余量。 
