grid-template-areas 通过命名区域定义视觉布局，元素用 grid-area 指定区域后按区域位置渲染，与 DOM 顺序无关；必须配对使用且名称严格一致，未指定的元素按源顺序填充剩余空位。
grid-template-areas 怎么控制元素视觉顺序
视觉顺序和 DOM 顺序可以完全分离，grid-template-areas 是最直观的声明式方式。你定义一个命名区域网格，再用 grid-area 把每个元素“扔”进指定区域，浏览器就按区域位置渲染，不管它在 HTML 里排第几。
常见错误是只写 grid-template-areas 却忘了给子元素设 grid-area，结果所有元素堆在第一格。
- 区域名必须用引号包裹，每行一组，空格分隔列，换行分隔行
-
grid-area值必须和grid-template-areas中的名称**严格一致**（包括大小写和连字符） - 未被
grid-area指定的元素会按源顺序自动填充剩余空位，可能破坏预期布局
display: grid; grid-template-areas: "header header header" "sidebar main cta" "footer footer footer";
grid-column / grid-row 怎么精确定位单个元素
当只需要微调某几个元素，不用重排整个布局时，grid-column 和 grid-row 更轻量。它们直接指定起始/结束线号（或名称），跳过 DOM 顺序影响。
容易踩的坑：线号从 1 开始计数，不是 0；用 span 时要注意是否超出显式网格范围，超出部分会隐式创建新轨道，但可能引发意外高度/宽度。
立即学习“前端免费学习笔记（深入）”；
-
grid-column: 2 / 4表示从第 2 条线开始，到第 4 条线结束（占两列） -
grid-row: span 2表示向下跨 2 行，起点由自动定位规则决定 - 若同时设置
grid-column和grid-row，该元素就完全脱离文档流顺序，只认坐标
order 属性在 grid 容器中真的有用吗
有用，但仅限于**同一网格轨道内**的排序，且优先级低于 grid-column/grid-row 和 grid-area。一旦元素被显式定位，order 就失效了。
典型误用场景：给用了 grid-area 的元素还加 order，以为能再调整——实际不会生效。
-
order默认值是 0，数值越小越靠前 - 只对未指定列/行位置的元素起作用（即靠自动定位填入的那些）
- 在可访问性（如屏幕阅读器）中，
order不影响读取顺序，DOM 顺序仍主导语义流
用 grid-auto-flow: dense 要特别小心什么
它会让“空洞”被后续小元素填充，看起来像打乱了顺序，但本质是自动定位策略变化，不是重排。多数时候不需要它，反而会让维护变难。
最常被忽略的是：启用 dense 后，原本靠 order 排序的元素可能被插队，导致视觉顺序和预期不符，尤其当混合使用 span 和不同尺寸项时。
- 只在明确需要紧凑填充（比如响应式卡片墙）时启用
- 一旦用了
grid-column或grid-area，grid-auto-flow对这些元素无影响 - 与
order共用时行为不可预测，建议避免
grid-area 最稳，grid-column/grid-row 最灵活，其余都是补丁。DOM 顺序只在 fallback 或可访问性层面有意义。 
