Grid在移动端商品列表更稳，因其列数确定、不依赖内容尺寸和像素精度，避免Float的塌陷、错行及热区偏移问题；Float在小屏下因盒模型偏差、异步加载等易失效，而Grid响应式只需改一行代码且空卡片不塌陷。
Grid 在移动端商品列表里更稳，不是因为它“新”，而是 Float 在小屏宽度、动态内容和触摸交互下会系统性失效——塌陷、错行、热区偏移全都会发生。
Float 商品列表在小屏上为什么总掉行
Float 不是“换行”，是“撞墙就掉”。它不感知容器剩余空间，也不重算列数。一旦父容器有 padding、子项带 border 或 margin，或者 Safari 对 calc(50% - 4px) 四舍五入出偏差，第三张卡片就可能被挤到下一行，且父容器高度不更新，造成视觉错位。
- 子项写
float: left; width: 33.333%，但没加box-sizing: border-box→ 实际宽度超 100% - 安卓 WebView 解析
vw+float时换行点比 iOS Safari 多出 1–2 像素偏差 - 图片异步加载完成前，卡片高度为 0，float 元素“悬空”，后续内容上浮覆盖
Grid 的列数声明是确定性的，不是靠“挤”出来的
Flexbox 用 flex-basis 或 width: calc() 挤两列，本质是一维近似；Grid 用 grid-template-columns: repeat(2, 1fr) 直接定义二维轨道，浏览器按容器宽度均分，不看内容尺寸、不依赖小数像素精度。
- 列宽计算完全由容器驱动，
gap不参与盒模型，不会撑破容器 - 响应式只需改一行：
@media (max-width: 768px) { grid-template-columns: 1fr; }，子项不用动 class 或样式 - 空卡片也不会塌陷：加
grid-auto-rows: minmax(100px, auto)即可兜底
Float 在 Grid 容器里会被浏览器静默忽略
这不是兼容性问题，是规范层面的废弃。你在 display: grid 的父元素里给子项写 float: left，Chrome、Safari、Firefox 都会直接跳过——它既不参与网格定位，也不触发清除逻辑，clear 失效，justify-content 计算还可能被干扰。
- 混用
float和grid不是“多一个功能”，是引入不可控渲染分支 - 如果调试时发现某张卡片位置异常，先搜代码里有没有残留的
float或clear - 图文环绕是唯一例外场景：只有
float能让段落文字自动绕图，Grid/Flex 都做不到
真正容易被忽略的是：Grid 的稳定性不来自语法炫技，而来自约束收束——写死列数、禁用 auto-fit、少用命名区域，这些“保守写法”在低端安卓机上反而 Layout 更快、表现更一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
