Grid 是原生二维布局系统，适合整体结构划分；Flex 是一维布局，适用于内部对齐；二者应分层使用，避免嵌套混乱，Grid item 上慎用 flex 或 width，响应式网格优先用 Grid 的 auto-fit/minmax。
Grid 布局本身就能完成绝大多数网格需求，不需要强行套 Flex
很多人一上来就想“用 Flex 搭 Grid”，其实 grid 是原生二维布局系统，行+列控制直接、明确；而 flex 是一维（主轴+交叉轴），强行嵌套反而增加复杂度。真实项目中，grid 负责整体结构划分（比如页面的 header / sidebar / main / footer），flex 用于内部对齐（比如按钮组居中、表单项标签与输入框水平对齐）。
常见错误现象：display: grid 容器里又给子元素加 display: flex，结果子元素尺寸被双重约束搞乱，或 justify-content 在 grid item 上失效（因为 grid item 的对齐由父级 justify-items 或 justify-self 控制）。
- Grid 容器内，item 的
margin: auto可直接实现居中（比 flex 更简洁） - Flex 容器内，
flex-wrap: wrap配合flex-basis才能模拟“响应式网格”，但列数不固定、断点难控 - Grid 的
repeat(auto-fit, minmax(300px, 1fr)))一行代码就能做响应式等宽列，Flex 做不到原生等效
真需要结合时，只在特定层级分工：Grid 做容器，Flex 做内容对齐
典型场景是卡片列表：外层用 grid 控制几行几列，每张卡片内部用 flex 排布标题、描述、操作按钮。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
}
.card h3 {
margin: 0 0 0.5rem 0;
}
.card .actions {
margin-top: auto;
display: flex;
gap: 0.5rem;
}
这里关键点在于：卡片自身是 flex，但它作为 grid 的 item，尺寸由 grid 轨道决定；flex 只负责内部空间分配，不干扰外层网格结构。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 不要反过来——用 flex 做外层容器再塞 grid item，会导致 grid track 失效
- 避免在 grid item 上同时设
width和flex，容易触发浏览器计算冲突 - 如果卡片内部需横向滚动（如标签栏），用
flex+overflow-x: auto比 grid 更可控
兼容性差异直接影响选择：Grid 支持已无悬念，Flex 更老但细节更毛躁
现代浏览器（Chrome 66+、Firefox 61+、Safari 11.1+、Edge 16+）对 grid 的支持完整，连 subgrid（Firefox 71+、Chrome 105+）都已落地。反而是某些 Flex 行为在 Safari 旧版（flex: 1 在嵌套 flex 容器中塌陷、align-items: stretch 对绝对定位子元素无效。
- 若需支持 IE11，必须放弃
grid，改用float或inline-block+ 媒体查询模拟网格 - Flex 的
gap属性在 Safari 14.1 之前不支持，得靠margin模拟；而 Grid 的gap从一开始就有 - Grid 的
grid-area命名区域写法（"header header" "nav main"）比 Flex 的order+flex-direction更直观、可维护
调试时优先查 grid-template 和 grid-column，别一头扎进 flex 属性
当布局错乱，90% 的问题出在 grid 定义本身：比如 grid-template-rows 写成 1fr 2fr auto 却忘了给内容留高度，导致最后一行塌缩；或 grid-column: span 2 用在没定义足够列的容器里，直接溢出。
- 用浏览器开发者工具的 Layout 面板勾选 “Grid Overlay”，立刻看清轨道线和命名区域
- 检查
grid-column-start/grid-column-end是否越界（例如容器只有 4 列，却写了grid-column: 1 / -1） - Flex 相关属性（如
flex-grow）在 grid item 上基本无效，别浪费时间调它
真正复杂的点往往不在“怎么写”，而在“要不要写”——先确认是否真的需要混合，还是只是把 Grid 当成了 Flex 的替代品来用。
