grid 更可控、更少出错。它将布局逻辑收束至容器层，避免子元素堆砌补丁式样式；相比 flexbox 的一维挤列，grid 用 repeat(2, 1fr) 明确两列，不受小数像素、padding、border 影响；需用 gap 替代 margin，加 grid-auto-rows: minmax(100px, auto) 防塌陷，响应式仅需改 grid-template-columns 即可。
因为 Grid 能把布局逻辑收束到容器层，避免在子元素上堆砌 margin、width、float 等补丁式样式——这对迭代频繁、屏幕碎片化严重的移动端项目来说，不是“更高级”，而是更可控、更少出错。
移动端多列卡片该用 grid-template-columns 还是 flex-wrap
用 grid-template-columns。Flexbox 是一维模型，靠 flex-basis 或 calc(50% - 6px) 挤出“两列”，但小屏下 padding、border、Safari 对小数像素的四舍五入，都可能让第三项被挤到下一行；Grid 则明确声明 repeat(2, 1fr)，两列就是两列，不看内容长度。
- 别混用
fr和固定值（如1fr 200px），窄屏极易触发横向滚动 - 必须加
gap，别用margin模拟间距——gap不参与子项盒模型计算，无“最后一行多空白”问题 - 防塌陷加
grid-auto-rows: minmax(100px, auto)，空卡片不会高度为 0
响应式断点切换时，Grid 只需改一行的原因
传统 float + calc 方案在从桌面三栏切到移动端单栏时，得重写宽度、浮动方向、清除逻辑，常要 8–12 行媒体查询；Grid 只需在 @media 里改 grid-template-columns 的值：
/* 桌面 */
.grid { grid-template-columns: 200px 1fr 300px; }
<p>/<em> 移动端 </em>/
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; }
}</p>
- 子元素完全不用动 class 或样式，也不用加
:nth-child(3n)清除 margin - 如果用
auto-fit + minmax()，注意minmax(140px, 1fr)中的140px是最小可触控区域，低于此值易误点 - 别写
repeat(12, 1fr)模仿 Bootstrap——移动端不需要 12 列，反而增加 Layout 计算负担
gap 替代 margin 的真实收益
网格类列表（如商品卡片、图标组）用 gap 后，父容器加一行 gap: 12px 即可，所有间隙自动均匀分布；而用 margin 得为每个子项写 margin-right 和 margin-bottom，还要额外处理换行后“最后一行/列”的间隙清理——这是移动端高频出错点，调试成本远高于写一行 gap。
-
gap在 iOS Safari 14.5+ 和 Android Chrome 72+ 均原生支持，无需前缀 - 它不影响子项的
box-sizing、padding或border计算，不会意外撑破容器 - 当卡片内容动态加载或折叠时，
gap的稳定性比手动margin高得多
真正容易被忽略的是：Grid 减少的不只是代码行数，更是样式之间的隐式耦合。一旦布局控制权从子元素交还给容器，后续调列数、改间距、切断点，就不再需要全局搜索所有 margin 和 width 声明——这种解耦带来的维护节省，在移动端快速迭代中，比初写时少敲几行代码重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
