flexbox排不出整齐卡片网格因其一维布局特性，换行后各行独立对齐且无法跨行定位；grid通过grid-template-columns/rows建立二维坐标系，支持行列联动、跨格及gap统一间距，更适合卡片网格布局。
Flexbox 为什么排不出整齐的卡片网格
因为 Flexbox 是一维布局，换行后各行独立计算对齐。即使你写了 flex-wrap: wrap 和 justify-content: space-between，第 2 行的左边缘也不会和第 1 行对齐——尤其当卡片高度不一致时，底边完全参差不齐。
常见错误现象：flex-direction: row 下卡片宽度自适应，但右侧留白不均；用多层嵌套 Flex 模拟网格，结果响应式断点一改，列对齐全乱。
- 别指望
align-items: stretch让不同内容的卡片等高（它只拉伸“无明确高度”的子项） - 想让某个卡片跨两行？Flexbox 做不到，除非脱离文档流用
position: absolute - 移动端单列、桌面三列？得写三套
@media+ 三层嵌套 Flex，维护成本高
Grid 怎么定义“行列坐标系”
Grid 不靠内容推导结构，而是先画格子再填内容。关键在 grid-template-columns 和 grid-template-rows ——它们共同建立二维坐标系，每个子项的位置由行列线决定。
比如：grid-template-columns: 240px 1fr 定义两列，grid-template-rows: auto 1fr auto 定义三行，header 就能稳稳落在 grid-row: 1，main 落在 grid-row: 2，footer 在 grid-row: 3。
-
grid-column: 1 / -1让元素横跨整行，grid-row: 2 / 4让它占两行——Flexbox 没有这种语法 -
gap同时控制行间距和列间距，比 Flexbox 里用margin模拟干净得多 - 命名区域如
grid-template-areas: "header header" "sidebar main"，直接用grid-area: sidebar定位，语义清晰
justify-content 在 Grid 里为啥没反应
因为 Grid 默认不响应 justify-content 控制子项水平位置——它只作用于 Flex 容器。Grid 里对应的是 justify-items（控制所有子项）或 justify-self（控制单个子项）。
典型翻车点：给 Grid 容器写了 justify-content: center，发现子项纹丝不动。这不是 bug，是模型差异。
- 想让所有子项在列方向居中？用
align-items: center - 想让某个卡片在它所在格子里右对齐？加
justify-self: end -
place-items: center是justify-items+align-items的简写，但别滥用，容易掩盖对齐意图
什么时候该嵌套用，而不是二选一
真实项目几乎总是嵌套：Grid 划外层骨架，Flex 处理内部对齐。比如一个仪表盘页面，用 Grid 划分 header、sidebar、main、footer 四个区域；每个区域内部再用 Flex 排按钮、文字、图标。
卡片组件本身适合用 Grid 定义图片、标题、描述的二维位置；但卡片里的“操作按钮组”，用 display: flex + justify-content: space-between 更轻量直接。
- 别在 Grid 容器里强行用 Flex 属性做整体对齐，先确认你是在搭承重墙（Grid），还是摆家具（Flex）
- Safari 16.4+ 才支持
grid-template-areas自动换行，旧版必须显式写grid-area，否则命名区域错位 - 动态增删子项时，Grid 渲染更稳定；Flex 嵌套层数一多，重排开销明显上升
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
