实现移动端单列 Grid 布局的关键是添加 viewport meta 标签、合理设置 gap、使用 minmax() + auto-fit 实现响应式，并确保父容器 box-sizing: border-box 且无干扰样式。
直接用 display: grid + grid-template-columns: 1fr 就能实现，但真正在移动端可靠运行，关键不在“单列”，而在“不触发横向滚动”和“内容不溢出”。
必须加 viewport meta 标签，否则 Grid 在手机上会失效
很多开发者写了正确的 Grid 代码，但在 iPhone 或安卓浏览器里布局错乱、文字被缩放、甚至出现横向滚动条——根本原因不是 CSS 写错了，而是页面没告诉浏览器“请按设备宽度渲染”。
缺了这行，1fr 会按桌面默认视口（通常是 980px）计算，导致网格项被强行压缩或撑开：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 这个标签必须放在
里，且不能被 JS 动态插入（部分 iOS Safari 不识别） - 不要写
user-scalable=no，它会破坏可访问性，且和 Grid 无关 - 如果用了 UI 框架（如 Tailwind），确认它没覆盖或删掉这个 meta
grid-template-columns: 1fr 足够，但别漏掉 gap 的影响
单列不等于“只写一列就完事”。gap 是网格项之间的间距，它会占用容器宽度。在窄屏下，过大的 gap 可能让内容实际宽度超过 100%，悄悄引发横向滚动。
立即学习“前端免费学习笔记（深入）”；
- 推荐用较小的固定值，比如
gap: 12px或gap: 1rem，避免用2rem以上 - 如果子元素内部有
width: 100%的图片或卡片，它们会尝试撑满“列宽减去 gap”，但 gap 是额外加的，所以总宽度 = 列宽 + gap —— 这就是溢出根源 - 临时排查：给容器加
overflow-x: hidden只是掩盖问题，应优先检查gap和子元素max-width
真正需要响应式时，minmax() + auto-fit 比媒体查询更稳
如果你的“单列”只是最小断点，后续要扩展为双列/三列（比如从手机到平板），别急着写一堆 @media。Grid 自带的流动能力更轻量、更少出错。
这段代码在所有宽度下都安全：
.card-list {<br> display: grid;<br> grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));<br> gap: 12px;<br>}
- 在 iPhone 竖屏（~375px 宽）下，
minmax(280px, 1fr)无法容纳两列，自动退化为单列 - 不需要
@media (max-width: 480px) { ... }，减少维护成本 -
auto-fit会把剩余空间分配给现有列；auto-fill则保留空轨道，容易在小屏留白，所以选auto-fit - 280px 是经验下限：小于它，文字可读性下降，触摸目标过小
最常被忽略的一点：Grid 的 1fr 计算依赖于父容器的宽度，而父容器如果没设 width 或受 padding/border 影响，fr 就会算歪。务必确认外层容器用了 box-sizing: border-box，且没有意外的 margin 或 transform 干扰布局流。
