结论是外层页面结构用 grid、组件内部排列用 flex；判断依据是区分二维区域划分（如导航+内容+边栏）与一维流式控制（如按钮居中、表单对齐），grid 适合蓝图式布局，flex 更轻量可控。

直接说结论：不是“选一个”，而是“谁管骨架、谁管血肉”——外层页面结构用 grid，组件内部排列用 flex。

判断依据：你是在排“一张表”，还是在排“一行字”

这是最快速的决策起点。如果目标是定义整个页面的区域划分（比如左侧导航栏 + 中间内容区 + 右侧边栏），那就是二维问题，grid 是自然选择；如果只是让按钮组水平居中、让表单项垂直对齐、让卡片在容器里自动换行，那就是一维流式控制，flex 更轻量、更可控。

• 写 grid-template-areas: "header header" "nav main" "footer footer" → 你在画蓝图，用 Grid
• 写 justify-content: space-between 或 margin-left: auto 推最后一个元素到最右 → 你在调单行节奏，用 Flexbox
• 看到需求里有“第一行 3 列、第二行 2 列、第三行 4 列”这种不规则跨行分布 → 别硬套 flex-wrap，该上 grid-column 手动定位了

响应式卡片列表：flex-wrap 通常比 grid-auto-flow 更稳

很多人一见“要换行”就切 Grid，结果在小屏下 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 配合 grid-gap 看似优雅，实则容易因子项 min-width 或父容器 padding 导致最后一行塌陷或错位。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• flex-wrap: wrap + flex-basis: 280px + gap（现代浏览器）能覆盖 95% 的卡片流场景，重排开销更低
• Flexbox 对动态增删卡片更友好——新增项自动插入流尾，Grid 的隐式轨道可能触发意外的 grid-auto-rows 计算
• 真要响应式“列数固定但行高自适应”（如图文混排画廊），才考虑 grid 搭配 grid-auto-rows: minmax(200px, auto)

嵌套层级：两层 flex 很安全，三层 grid 很危险

Grid 嵌套不是语法错误，而是维护灾难。外层用 grid 划分主区域后，在某个 grid-area 里再套一层 grid 做按钮对齐，极易出现 gap 叠加、align-items 冲突、调试时找不到样式源头的问题。

• 推荐组合：grid 定义页面骨架 → 各 grid-area 内部用 flex 排内容（如侧边栏菜单用 flex-direction: column，表单控件用 flex 对齐标签和输入框）
• Flexbox 嵌套天然隔离：内层 flex 只影响自己子项，不会干扰外层布局逻辑
• 若必须嵌套 Grid，请确保子容器显式声明 grid-template-columns/rows，避免依赖隐式轨道

兼容性与降级：IE11 下别碰 gap 和 subgrid

虽然现在多数项目已放弃 IE11，但仍有政企系统需要兜底。此时要注意：

• gap 在 IE11 的 Grid（旧语法）中完全不支持，Flexbox 也不支持；得退回 margin hack，且需处理 :last-child 边距
• IE11 的 Grid 用的是 display: -ms-grid，grid-column 要写成 -ms-grid-column，且无 auto-fit、subgrid 等现代特性
• Flexbox 的 IE11 支持度好得多，justify-content、align-items 基本可用，唯一常见坑是 align-items: center 对 img 默认有基线对齐残留，加 vertical-align: middle 即可

真正容易被忽略的点是：Grid 的 place-items 和 Flexbox 的 justify-content + align-items 看似都能居中，但前者作用于整个网格单元格，后者只作用于主轴/交叉轴上的项目流——当容器里混有 position: absolute 元素或设置了 grid-row 的显式定位项时，行为会彻底分叉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！