页面级结构划分必须用 display: grid，因其支持二维布局和语义化区域命名；一维流布局如导航、表单等优先用 display: flex，更轻量可控；Grid 与 Flex 嵌套推荐外层 Grid、内层 Flex，兼顾结构与弹性。
页面骨架该用 display: grid 还是 display: flex？
页面级结构划分必须用 display: grid。header/main/aside/footer 这类语义区域不是“排成一行”或“堆成一列”的问题，而是同时需要控制行和列的二维关系——Flexbox 无法定义跨区域的行列对齐，也做不到 grid-template-areas 那种语义化区域命名。
- 桌面端三栏：
grid-template-columns: 250px 1fr 300px，平板改为1fr 1fr，手机直接1fr，DOM 不动，CSS 只改一行 - 想让侧边栏折叠时宽度平滑过渡？
grid-template-columns: 0fr 1fr+transition比 Flexbox 的width/max-width组合更稳定，浏览器不用反复重排 - 注意 Safari 14.1+ 才稳定支持
gap；IE11 完全不认gap和subgrid，实际项目中基本要绕开
导航栏、卡片内布局为什么优先用 display: flex？
只要布局本质是“一维流”，比如水平排列菜单项、垂直堆叠标题+按钮、表单控件左右配对，display: flex 就更轻量、更可控。它不预设轨道数，新增子项自动排列，也不依赖父容器显式高度来触发 align-items: stretch 等高效果。
-
justify-content: space-between+align-items: center两行搞定居中，比 Grid 的place-items更直觉 - 移动端隐藏某个导航项？直接
display: none，其余项自动撑满，不用改布局定义 - 子项高度不一致但要等高？默认就生效，无需 hack；但若父容器没设高度，
height: 100%在 flex 子项里会失效，得加min-height: 0或显式设height
Grid 容器里嵌套 Flex 项目会不会出问题？
这是最安全、最推荐的组合方式：display: grid 定义外层区域，每个区域内部再用 display: flex 排列内容。Grid 先分配空间，Flex 再在分到的“盒子”里做伸缩，逻辑清晰，性能可控。
- grid 子项设
display: flex合法且高效；反过来（flex 容器里塞 grid 子项）语法虽通，但通常没必要，属于职责错位 - grid 轨道宽为
1fr时，内部 flex 容器可能不填满，需加width: 100%或min-width: 0防止溢出 -
grid-column: span 2的项里用 flex？别忘了给它设min-width: 0，否则长文本容易撑破边界
响应式切换时该不该来回切 display 值？
别用媒体查询在 display: flex 和 display: grid 之间来回切。DOM 不变，但 layout engine 得重建整个渲染树，性能损耗明显。真正干净的做法是：外层统一用 Grid，靠 grid-template-columns 和 grid-template-areas 在不同断点下重定义结构。
- 卡片列表小屏用 column，大屏切网格？直接写
@media (min-width: 768px) { .list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } - 同一套 HTML，只改 CSS，不碰 JS，不增 DOM 节点——这才是现代响应式该有的样子
- 真正容易被忽略的不是“选哪个”，而是容器尺寸约束：无显式高度时，flex 子项的
height: 100%失效，grid 的minmax()在滚动中可能触发频繁重算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
