必须用grid-column和grid-row；当布局需精确定义元素在网格中的行列位置（如第2行第3列、跨两行、与header共享区域）时，CSS Grid是唯一能直接表达该语义的方案，Flexbox无行列坐标系，硬凑会导致嵌套多、维护难。
需要明确控制行列交叉位置时必须用 grid-column 和 grid-row
当你写的不是“一行按钮”或“一列表单”，而是类似仪表盘、后台菜单+内容+页脚、杂志式图文混排这类结构，元素天然落在「第2行第3列」「跨两行占一列」「和 header 共享同一区域」时，display: grid 是唯一能直接表达这种语义的方案。Flexbox 没有行列坐标系，硬凑只能靠嵌套 wrapper、手动设 width、加 margin 或用 nth-child 做 hack，后期改布局成本极高。
常见错误现象：justify-content: center 在 Grid 容器里没反应——因为 Grid 默认不启用主轴对齐逻辑，得改用 justify-items 或 place-items；而你在 Flex 容器里误写 grid-column，浏览器直接忽略。
要让多栏内容等高且底部对齐时，align-items: stretch 在 Grid 中更可靠
卡片墙、三栏资讯区、侧边栏+主内容这类场景，如果用 Flex 实现等高，常要处理 min-height、height: 100% 继承断层、交叉轴拉伸失效等问题。Grid 的 align-items: stretch（默认值）在显式定义了 grid-template-rows 或使用 1fr 时，会自然让所有子项撑满行高，无需额外 hack。
- Flex 下高度不齐：某张卡片描述多两行，其他卡片底部就错位
- Grid 下等高前提：容器需有明确高度来源（如
min-height: 100vh或父级设高），且未被overflow: hidden截断 - 移动端响应式建议：用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，比写一堆@media干净得多
需要语义化区域划分（比如 header/sidebar/main）时，grid-template-areas 不可替代
grid-template-areas 是把布局意图写进 CSS 的最直白方式。它让 HTML 结构保持扁平，不用为对齐或换行塞一堆无意义的 wrapper。例如：
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
注意兼容性坑：grid-template-areas 在 Safari 16.4+ 才支持命名区域自动换行，旧版 Safari 必须显式写 grid-area: sidebar，否则区域名无效。
另一个易忽略点：Grid 划外层骨架，Flex 处理内部对齐是合理分层；但如果在 Grid 子项里又套一层 display: grid，大概率说明你本该用 grid-template-areas 或 subgrid（目前支持度有限），而不是盲目嵌套。
遇到粘底页脚、固定侧边栏+自适应主内容这类“整体高度约束”问题时，grid-template-rows 一行解决
Flex 实现「头部固定高 + 主内容占满剩余空间 + 页脚粘底」，常要写 min-height: 100vh、flex: 1、overflow 控制、甚至 JS 补高度。Grid 只需：
.layout {
display: grid;
grid-template-rows: auto 1fr auto;
}
这里 1fr 是隐式分配剩余空间，不依赖父容器是否设高，也不怕子项内容溢出导致父容器塌陷。但要注意：若主内容区域内部用了 Flex，记得设 min-height: 0 防止它继承 Grid 行高后无法收缩。
复杂点在于，Grid 的隐式轨道（比如内容超出行数时自动新增行）和显式轨道（grid-template-rows 定义的）行为不同，调试时得看清楚 DevTools 里标的是「explicit」还是「implicit」轨道。
