优先用 grid-template-columns，因其是二维声明，列数、列宽、间距全部可控；flex-wrap 是一维换行，不定义列数，仅按宽度塞元素，易导致错行、对不齐和高度不均问题。
多列布局该用 grid-template-columns 还是 flex-wrap？
直接结论：优先用 grid-template-columns，除非你明确只需要单行排列、或必须兼容 IE11 且无法引入 polyfill。
flex-wrap 本质是一维换行，它不定义“列数”，只按宽度不断塞元素进主轴；而 grid-template-columns 是二维声明，列数、列宽、间距全部可控。常见错误是给 flex 容器加 justify-content: space-between 后发现最后一行对不齐——这不是 bug，是设计使然：Flexbox 根本没“列”这个概念。
- 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))能自动适配容器宽度，列数随屏宽变化，无需 media query - 用
flex-wrap实现类似效果必须配合width+nth-of-type清 margin，代码膨胀且易出错 - 如果卡片高度差异大，
flex-wrap下各行高度独立，视觉错位明显；grid默认等高行，更符合卡片墙预期
gap 和 margin 在多列布局中能混用吗？
不能混用，尤其不能在 grid 或 flex 容器里靠子项的 margin 控制列间距。
gap 是布局级间距，它不触发 margin 合并、不影响盒模型计算、不参与 flex 基础尺寸推导；而 margin 是元素级样式，容易和父容器 padding 冲突，换行时还可能把元素挤出视口。
- Grid 容器统一用
gap: 1rem，别给.grid-item设margin - Flex 容器也优先用
gap（现代浏览器已全支持），若需兼容旧版，用margin-right+:nth-of-type清除最后一项右距 - 特别注意：在
display: grid容器中设了gap后再给子项加margin，会导致实际间距翻倍
响应式列数切换为什么不用 media query 改写 display？
因为 display: flex ↔ display: grid 切换会强制浏览器重建整个渲染树，性能开销远高于纯 CSS 属性变更。
真正高效的响应式列数控制，是用 Grid 自带的函数表达式，在一个声明里完成适配。
- 写死列数如
grid-template-columns: repeat(3, 1fr)只适合固定设备场景 - 用
repeat(auto-fit, minmax(250px, 1fr))让浏览器自动计算最多能放几列，最小宽度卡死，超出部分均分 - 需要断点干预时，只改
minmax()的第一个参数，比如@media (max-width: 768px) { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))); } - Flexbox 场景下，
flex-basis配合flex-wrap也能响应式，但无法保证每行列数一致，更适合内容流式场景
等高列一定要用 align-items: stretch 吗？
不一定。在 Flexbox 中 align-items: stretch 是默认行为，但前提是子项没设 height 或 min-height；在 Grid 中，等高是天然特性，无需额外设置对齐属性。
最容易被忽略的是：Grid 的等高依赖于行高由内容最高项决定，一旦你显式写了 grid-auto-rows: 200px，所有行就固定高了，反而失去自适应能力。
- Flexbox 等高失效常见原因：子项用了
height: 100%或min-height: 200px，覆盖了 stretch 行为 - Grid 等高失效常见原因：写了
grid-template-rows或grid-auto-rows固定值，或子项内部用了display: flex+flex-direction: column却没设高度约束 - 如果真需要某张卡片撑高整行，Grid 用
grid-row: 1 / -1，Flexbox 只能靠 JS 测高或 CSS hack，不可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
