手机端单列堆叠应使用@media (max-width: 480px)重设grid-template-columns: 1fr并调整gap，避免用max-device-width、orientation或display: block降级，同时同步重置grid-auto-rows为auto以防止行高突变。
手机端用 grid-template-columns: 1fr 强制单列堆叠
网格元素在小屏上不堆叠，本质是 grid-template-columns 还维持着多列定义（比如 repeat(3, 1fr)）。最直接的解决方式是在媒体查询中覆盖为单列：用 1fr 而不是 repeat(1, 1fr) —— 后者冗余且部分旧版 Safari 会解析异常。
注意：不能只改 grid-column 或靠 flex-direction 混用，那是对 Grid 的误用。
- 必须重设
grid-template-columns，其他属性（如gap）可保留 - 若原布局用了
minmax()或auto-fit，手机端建议直接写死1fr，避免响应逻辑冲突 - 堆叠后行高可能突变，建议同步检查
grid-auto-rows是否需重置为auto
用 @media (max-width: 480px) 覆盖断点，别依赖设备像素比
“手机端”没有统一宽度标准，但绝大多数现代手机竖屏宽度 ≤ 480px（含 iPhone SE、Pixel 5 等），用 max-width: 480px 比 max-width: 768px 更稳妥——后者容易把平板也卷入堆叠，破坏体验。
常见错误是写成 @media screen and (max-device-width: 480px)：这个值不随旋转变化，横屏时仍触发堆叠，导致内容被压缩。
立即学习“前端免费学习笔记（深入）”；
- 始终用
max-width（视口宽度），不用max-device-width - 避免使用
orientation: portrait单独控制，用户旋转屏幕时样式跳变明显 - 如果项目已用 CSS 自定义断点（如
--breakpoint-sm），确保该变量实际对应 ≤ 480px
堆叠后保持间距一致，优先调 gap 而非 margin
网格堆叠时，gap 会自动作用于相邻行之间；若改用 margin-bottom 控制间距，会导致最后一项多出空白、或与容器底部距离失控。
示例：原网格有 gap: 1rem，堆叠后想加大垂直间距？直接在媒体查询里改 gap 即可：
/* 堆叠前 */
.grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
<p>/<em> 堆叠后 </em>/
@media (max-width: 480px) {
.grid { grid-template-columns: 1fr; gap: 1.5rem; }
}-
gap在单列 Grid 中等效于行间距，语义清晰且无副作用 - 不要给子项加
margin模拟间隙，Grid 子项的外边距不会参与对齐计算 - 若需首尾留空，应通过父容器
padding实现，而非子项margin
避免用 display: block 回退到非 Grid 渲染
有人为“保险”在媒体查询里写 display: block，这会让元素彻底脱离 Grid 上下文：grid-column、grid-row 失效，动画/过渡中断，甚至触发重排（reflow）。
Grid 的响应能力足够强，只要列数归零（单列）、行自动延伸，就能自然堆叠。强行切 display 模式是把简单问题复杂化。
- 所有堆叠逻辑应在 Grid 内完成，不降级渲染模式
- 若兼容 IE11，另说；但当前场景明确针对现代手机，无需考虑
- 真正要警惕的是嵌套 Grid：外层堆叠了，内层仍多列——得逐层加媒体查询
堆叠本身不难，难的是在不同断点间保持间距、对齐和 DOM 结构的一致性。很多人卡在“看起来堆叠了，但最后一行贴底”或者“横屏切回竖屏时闪一下”，问题往往出在 gap 和 grid-auto-rows 没同步重置。
