大屏看板应优先用 grid，因其天然支持二维定位与行列交织布局；简单列表则更适合 flex，因一维排列更轻量、兼容性更好且无冗余计算。
大屏看板需要二维定位，Grid 天然支持行列交叉控制
看板本质是「多列容器 + 卡片自由堆叠」，比如左上角放实时指标、中间横跨两列放折线图、右下角固定高度放告警列表——这种行列交织的定位需求，Flexbox 必须靠嵌套容器模拟，而 grid-template-areas 或 grid-column/grid-row 一行声明就能锁定位置。
常见错误现象：用 Flex 做三列看板，加 flex-wrap 后卡片换行错乱；改用 Grid 后发现同一套 HTML 在不同屏幕下自动重排，不用改 DOM 结构。
- 桌面端定义
grid-template-columns: 2fr 3fr 1fr，移动端媒体查询里直接改成1fr单列，区域命名不变，内容自动流式堆叠 - 想让某张卡片横跨两列？写
grid-column: span 2即可，不依赖父容器是否设了flex-direction - 仪表盘常需「某区块占满剩余高度」，Grid 的
minmax(min-content, 1fr)比 Flex 的flex: 1更稳定，尤其在 Safari 下不会因子项溢出塌陷
简单列表只需一维排列，Flex 更轻量且兼容性更稳
纯文字列表、导航菜单、按钮组这类场景，核心诉求只是「水平或垂直对齐 + 自动换行」，Flex 的 flex-direction 和 flex-wrap 足够覆盖，且无额外计算开销。
常见错误现象：给 5 个 <li> 写 display: grid，结果浏览器为每个 item 创建隐式网格线，渲染性能反不如 Flex；IE11 不支持 Grid，但 Flex 有成熟降级方案（如 display: inline-block）。
- 列表项高度一致？
align-items: center一行搞定；高度不一？align-items: flex-start避免底部错位 - 需要等宽但不等高（如图标+文字按钮），Flex 的
flex: 1比 Grid 的repeat(3, 1fr)更少触发重排 - 若强行用 Grid 做列表，
gap会同时作用于行和列，而列表通常只需单向间距，容易多出意外空白
Grid 的 auto-placement 机制在看板中是优势，在列表中成干扰
看板卡片顺序常由后端数组索引决定，Grid 默认 grid-auto-flow: row 能严格按 DOM 顺序填满网格，拖拽更新数组后重新渲染即可重排；但简单列表若混用 order 和 grid-column，反而会让语义顺序与视觉顺序脱节。
性能影响：Grid 容器在 item 数量超过 50 时，auto-fit + minmax() 的轨道计算开销明显高于 Flex 的线性布局算法，尤其在低端 Android 设备上帧率下降更显著。
- 看板卡片数波动大（如动态增删监控项），Grid 的
repeat(auto-fit, minmax(280px, 1fr))自适应列数，无需监听 resize - 简单列表项固定为 10 条，Flex 的
flex-basis计算更快，且 CSS 引擎对其优化更成熟 - 别在列表里写
grid-area—— 它会覆盖 auto-placement，导致新增项卡在旧位置不动
Gap 和 margin 的叠加逻辑差异容易踩坑
Grid 的 gap 是容器级属性，只作用于网格项之间；Flex 的 margin 是项目级属性，兄弟元素间间距可能因 margin collapse 或双倍叠加出错。看板需精确控制卡片间隙，Gap 更可靠；列表若已用 margin 控制间距，再套 Grid 容器会导致间距翻倍。
- 看板容器设
gap: 16px，卡片内部用padding，完全避免 margin 相关 bug - 简单列表若从 Flex 切 Grid，必须清除所有卡片的
margin-right/margin-bottom，否则 gap + margin 叠加 - 移动端看板单列时，
gap的垂直间距会被放大感知，此时应配合媒体查询将gap改为12px而非沿用桌面端的16px
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
