justify-content 在 Grid 容器中始终失效，因其仅对 Flex 容器生效；Grid 中对应整体水平分布需用 justify-items、justify-self 或 place-items，且必须定义列轨道（如 grid-template-columns）才有对齐空间。
一维对齐用 display: flex，二维定位必须用 display: grid——这不是经验建议，而是浏览器渲染引擎的底层约束。
什么时候 justify-content 在 Grid 容器里失效？
因为 Grid 默认不启用主轴对齐逻辑，justify-content 只对 Flex 容器生效。Grid 中对应的是 justify-items（控制网格项内容）或 justify-self（单个项），而整体容器内项目的水平分布得靠 place-items 或显式设置 grid-template-columns 轨道。
- 没写
grid-template-columns的 Grid 容器，所有子项默认挤在第 1 列，此时justify-content: center完全无效果 - 想让导航菜单居中？Flex 是两行解决：
justify-content: center+align-items: center；Grid 得先定义至少两列轨道，再配合justify-items: center -
gap属性两者都支持，但 Grid 的gap同时作用于行列，Flex 的gap只作用于主轴方向（flex-direction: column时才影响垂直间距）
仪表盘外层骨架为什么不能只用 Flexbox？
Flexbox 一次只能管一个方向：设了 flex-direction: column，你就没法单独约束某个子项的宽度；设了 flex-wrap: wrap，卡片尺寸不一致时容易触发不可预测的换行抖动，尤其在实时数据刷新场景下，重排频率高、视觉跳动明显。
- 侧边栏折叠动画要平滑？
grid-template-columns: 0fr 1fr+transition: grid-template-columns 0.3s比 Flex 的width: 0+overflow: hidden更稳，不触发重排 - 监控图表需横跨两列+占半行？必须用
grid-column: 1 / span 2+grid-row: 2 / span 1；Flex 没有行列坐标系，硬凑只能套 wrapper +margin+calc()，维护成本高 - 响应式列数自动调整？
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))一行搞定；Flex 得配多个@media+flex-basis，漏一个断点就横向滚动
哪些内层结构反而该坚持用 Flexbox？
Grid 管骨架，但每个卡片、表单、工具栏内部仍是线性排列问题——Flexbox 更轻、更兼容、更可控。
立即学习“前端免费学习笔记（深入）”；
- 卡片头部含图标+标题+操作按钮？
display: flex+gap: 8px+align-items: center，比 Grid 写三列快得多 - 筛选栏里日期选择器、搜索按钮、重置按钮水平分布？单向流，
flex-direction: row直接解决 - 表单字段垂直堆叠且
label和input左对齐？flex-direction: column+align-items: flex-start，Grid 要额外设grid-template-rows和justify-items -
align-items: stretch在 Flex 中默认拉平子项高度，适合卡片图文对齐；Grid 中同效果得写align-items: stretch+ 所有轨道设min-height，否则子项高度由内容决定，视觉参差不齐
最易被忽略的其实是层级边界：Grid 容器的直接子元素才受 grid-column 控制；如果子项内部又套一层 display: grid，大概率是职责没分清——外层 Grid 做区域划分，内层 Flex 处理对齐，这个分工一旦模糊，调试就会陷入嵌套迷宫。
