用grid-template-areas定义语义化区域比手算行列更可靠，因其通过命名区块（如"header header sidebar"）实现直观布局，配合@media重定义整套区域映射，逻辑集中、可读性强；需注意名称严格匹配、引号包裹、用.占位、每行列数一致。
用 grid-template-areas 定义语义化区域比手算行列更可靠
很多人一上来就猛写 grid-column / grid-row，结果在响应式断点里越调越乱。真正可控的做法是先用 grid-template-areas 给每个区块起个名字，比如 "header header sidebar"，再配合 @media 重定义整个区域映射——这样逻辑集中、可读性强，改布局不用满屏找坐标。
注意：所有命名必须用引号包裹，且每行字符串代表一行，空格分隔列；同一区域名在多行中出现时，会自动合并成连续矩形块。
-
grid-area必须和grid-template-areas中的名称完全一致（区分大小写） - 用
.表示空白单元格，不要留空格或写null - 移动端优先时，先写最窄视口的布局，再用
min-width逐步增强
用 minmax() + auto-fit 实现自适应卡片栅格
仪表盘里常有“指标卡片”组，数量不固定，又要求在不同屏幕下自动换行、等宽分布。硬写 repeat(4, 1fr) 在小屏上会溢出，而 repeat(auto-fit, minmax(300px, 1fr))) 才是正解——浏览器会根据容器宽度，动态计算最多能放几个 ≥300px 的列，剩余空间均分。
别用 auto-fill：它会渲染所有可能列（含不可见的），影响性能和 tab 键顺序；auto-fit 会折叠空列，更干净。
- 卡片内部用
display: contents可让子元素直接参与 Grid 布局（慎用，不支持 IE） - 若需卡片间固定间距，用
gap，别用margin——后者会破坏minmax()的尺寸计算 - 在 Flex 布局里嵌套 Grid 容易失控，这类卡片栅格应直接设为
display: grid
避免 grid-auto-flow: dense 引发的 DOM 顺序错乱
仪表盘里常有“高优模块优先渲染”的需求，比如把 status-card 提前写在 HTML 里，但希望它视觉上出现在顶部区域。有人用 grid-auto-flow: dense 配合 grid-row 强行插空，结果导致屏幕阅读器顺序和视觉顺序不一致，也破坏了键盘 tab 流。
正确做法是：保持 HTML 结构与视觉逻辑一致，用 grid-area 和 grid-template-areas 控制位置，必要时用 order（仅对 Flex 子项）或调整 DOM 顺序本身。
-
grid-auto-flow: dense会让 Grid 自动填充空洞，但无法保证内容语义顺序，无障碍测试必报错 - 如果真要“跳着排”，优先考虑 CSS
display: contents+ 重新组织嵌套层级 - 所有带交互的卡片，确保其
tabindex和 DOM 顺序匹配，否则 WCAG 2.1 2.4.3 不通过
响应式断点中重定义 grid-template-columns 要小心隐式轨道
比如桌面端设了 grid-template-columns: 250px 1fr 300px，其中 1fr 是显式轨道；但加了 grid-auto-columns: 200px 后，任何超出三列的内容都会按 200px 分配——这在响应式切换时极易引发意外滚动或重叠。
真实项目中，90% 的问题来自没意识到隐式轨道的存在。建议：除非明确需要自动列，否则统一用 grid-template-columns 显式声明所有列，并在每个断点里完整覆盖。
- 检查 DevTools 的 Layout 面板，看“Grid”标签下是否有未命名的灰色轨道（即隐式轨道）
- 用
grid-column-end: -1让某区块横跨到最后一列，比写grid-column: 1 / -1更安全（避免因列数变化导致越界） - 当使用
subgrid（如子网格继承父级行线）时，父级必须显式定义grid-template-rows，否则无效
@media 就完事”，而是整套区域语义、轨道控制、隐式行为的协同。一旦某处用了 auto-fit，另一处又混了 grid-auto-flow: dense，调试成本会指数上升。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
