移动端多列卡片列表该用grid-template-columns，因其明确声明列数、gap自动处理间距、避免flex-wrap因渲染差异导致的错行；Flexbox仅适合一维流式布局。
Grid 在二维响应式场景中性能更稳、开发效率更高；Flexbox 在一维流式场景中更轻量、更直接——选错维度，再快的语法也救不了布局逻辑。
移动端多列卡片列表该用 grid-template-columns 还是 flex-wrap
用 grid-template-columns。Flexbox 的 flex-wrap: wrap 依赖内容宽度动态换行，但字体渲染差异、小数像素截断、box-sizing 混用会让同一组卡片在 iPhone SE（375px）和 iPhone 14 Pro（430px）上显示 1 列 vs 2 列，甚至第二行首项被挤到第三行。
Grid 明确声明列数：grid-template-columns: repeat(2, 1fr) 就是稳稳两列，gap 自动处理间距，不用手算 calc(50% - 6px) ——后者在 Safari 对小数像素处理不稳定，偶发错位。
- 别混用
fr和固定值（如1fr 200px），窄屏下易触发横向滚动 - 加
grid-auto-rows: minmax(100px, auto)防止单张卡片内容少时高度塌陷 -
gap在 Flex 中 Chrome 104+ 稳定，但 Firefox 95–100 对flex-direction: column+gap仍有漏距，需用margin降级兜底
整页区域响应式切换必须用 grid-template-areas
桌面端是 "header header header" "nav main aside" "footer footer footer"，平板断点只需改一行："header" "main" "footer"，侧边栏自动消失。HTML 结构完全不动，逻辑清晰可维护。
立即学习“前端免费学习笔记（深入）”；
Flexbox 强撑二维结构时，要靠 order + flex-direction + display: none 组合控制显隐，三四个断点后 CSS 就不可读了；漏设 flex-basis: 0 或 width: 0，小屏下仍占空间，导致横向滚动。
-
grid-column: 2 / span 1这类跨格定位，Flex 根本没有对应能力 - 硬写 wrapper 嵌套只会让 DOM 和样式都变臃肿
- 所有现代 iOS（14.5+）和 Android Chrome（72+）都完整支持，无需前缀
别在 Grid 容器里写 justify-content
很多人把 Flex 写习惯了，给 Grid 容器加 justify-content: center，结果居中失败还查不出原因——因为 Grid 的对齐体系是独立的。Grid 容器内有效的是 justify-items（控制所有子项）、justify-self（单个子项）、place-items（简写）。
Flex 子项设 grid-column 浏览器直接忽略；Grid 子项设 flex-grow 也无效——属性只在对应布局上下文中起作用。
- 真正该混用的地方是：Grid 区域内，子项自己设
display: flex做内部对齐（比如 header 里 logo + nav + search 水平居中） - 移动端键盘弹出时，Safari 的
vh会失真，导致height: 100vh+ Flex 垂直居中失效；Grid 的grid-template-rows: 1fr能锁定可用空间，不受vh动态变化干扰
最常被跳过的细节：Grid 容器内绝对定位元素不参与 place-items 计算；若只是单个图标+文字组合居中，Flexbox 渲染路径更短，没必要强切 Grid。
