必须用grid-row和grid-column（或grid-area）同时控制行列位置；Grid是唯一原生支持二维坐标定位的CSS布局系统，可精准实现跨行跨列、固定坐标及多项目共享单元格。
需要同时控制行和列的位置？必须用 grid
Grid 是唯一原生支持二维坐标定位的 CSS 布局系统。当你需要让一个元素「跨两行三列」，或「固定在第 2 行第 4 列」，或「多个项目共享同一网格单元」，grid-row、grid-column、grid-area 就是唯一直接解法。Flexbox 没有行列编号概念，order 只能改顺序，不能指定坐标；flex-wrap 换行后各行独立，无法强制列对齐——比如三列卡片在小屏下变成两行（3→2+1），第二行只剩一个卡片，左边大片空白，justify-content: space-between 对它无效。
只排一行或一列？flex 更轻量、更可控
导航栏、按钮组、表单字段对齐、卡片内部头像+文字垂直居中——这些全是单轴任务：justify-content 管主轴（水平/垂直），align-items 管交叉轴（垂直/水平），逻辑清晰，计算开销极小。常见误用是给导航菜单套 display: grid + grid-template-columns: repeat(4, 1fr)：既浪费 Grid 的二维能力，又因文字长度差异导致链接间距不均；而 display: flex + gap 或 justify-content: space-around 天然适应内容宽度。
align-items 在 Grid 和 Flex 中行为不同
在 Flex 容器中，align-items: stretch（默认）会让所有子项拉伸到容器高度，常导致卡片高度不一致；而在 Grid 容器中，align-items 控制的是每个网格单元内项目的对齐方式（比如单元格里文字靠上还是居中），不影响行高本身。Grid 的行高由 grid-template-rows 或 grid-auto-rows 决定，与子项内容无关。如果你发现 justify-content: center 在 Grid 容器里没效果，不是写错了，是因为 Grid 默认不启用主轴对齐逻辑——得用 place-items，或单独设 justify-items（针对单元格内内容）和 justify-content（针对整个网格轨道外的空白）。
页脚粘底、仪表盘卡片网格这类场景，别硬套 Flexbox
用 Flexbox 实现页脚粘底依赖 flex: 1 或 margin-top: auto，但前提是容器高度为 100vh 且无内容溢出；一旦页面嵌入 iframe、React hydration 造成初始高度偏差，或 main 区域内容超长，页脚就容易悬空或遮挡。Grid 方案 grid-template-rows: auto 1fr auto 中的 1fr 是真正的“剩余空间”，不依赖内容高度。同理，后台仪表盘卡片高度不一，Flexbox 的 flex-wrap 会让整行被最高卡片撑高，下方留白无法填平；Grid 的 grid-auto-rows: minmax(200px, auto) 可让每行自适应，不留空隙。
真正难的不是记住语法，是拿到一个布局需求时，第一反应不是“怎么写”，而是“这是几维问题”——二维坐标约束？选 Grid；单向流式排列？选 Flexbox。混用没问题，但错配维度会把简单事做复杂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
