grid负责页面级二维结构，flexbox处理组件内一维排列；应按职责分工使用，避免混用导致代码脆弱和响应式混乱。
Grid 负责页面级二维结构划分，Flexbox 处理组件内一维动态排列——这不是权衡取舍，而是职责分工。强行用 Flex 做多行多列区域定位，或用 Grid 控制按钮组对齐，都会让代码变脆、响应式逻辑混乱。
用 grid-template-areas 定义宏观骨架，别嵌套容器占位
常见错误是先写一个 .wrapper，再套 .header-wrapper，最后才放 .header；结果是 HTML 层级膨胀，CSS 里还要反复 display: flex 补救对齐。
- 直接在根容器上用
grid-template-areas命名区块，比如"header header" "sidebar main" "footer footer" - 每个语义区块（
.header、.sidebar）直接设grid-area，不额外包一层 - 移动端想改成单列？只改
grid-template-areas为"header" "sidebar" "main" "footer"，其他样式不动
在 Grid 区域内部用 display: flex 处理内容流，而非再套 Grid
比如 .main 区域要展示卡片列表，用 display: grid 再设 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 看似合理，但一旦卡片高度不一致，就会出现空白断层；而 Flex 的 flex-wrap: wrap 天然按行填充，更可控。
.card-list { display: flex; flex-wrap: wrap; gap: 16px; }- 每张卡片设
flex: 1 1 280px，保证最小宽度和弹性收缩能力 - 如果卡片内有标题+描述+操作按钮，用 Flex 水平/垂直居中比 Grid 更轻量
- 避免在
.card-list上同时写display: grid和display: flex—— 浏览器只认最后一个声明
导航栏、工具栏这类线性组件，优先用 Flex 而非 Grid
像 .header 里放 logo + 搜索框 + 用户头像，本质是一维布局：主轴排列 + 交叉轴居中。用 Grid 需要定义三列、设 justify-items、处理 gap 对齐，反而绕路。
.header { display: flex; align-items: center; justify-content: space-between; }- 搜索框想撑满剩余空间？给它加
flex: 1; margin: 0 16px; - 用户头像右侧带下拉菜单？整个用户区域用 Flex 嵌套，不拆成独立 Grid 区域
- 注意：不要给 Flex 容器设
width: 100%后又用justify-content: space-between—— 容器没剩余空间，space-between就失效
媒体查询中调整 Grid 结构时，保持 Flex 内部逻辑不变
很多人在 @media (max-width: 768px) 里把 Grid 改成单列，却顺手把所有 .card-list 的 flex-wrap 改成 nowrap，结果小屏卡片横向溢出。这是混淆了“结构”和“内容排列”的层级。
- Grid 变化只发生在容器级：改
grid-template-columns、grid-template-areas - Flex 容器（如
.card-list）的flex-wrap、gap、align-items通常无需重写 - 真要适配小屏？改卡片的
flex-basis，比如从280px降到220px，而不是动 Flex 模式本身 - 极端窄屏（如 iPhone SE）可加
overflow-x: auto和scroll-snap，让 Flex 容器横向滚动，比强行换行更可靠
真正容易被忽略的是：Grid 区域命名（grid-area）必须与 grid-template-areas 中的字符串完全一致，包括空格和换行；而 Flex 的 flex-wrap 在父容器 width 不足时才会触发——这两处看似简单，却是线上布局错位最常发生的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
