grid-template-areas 必须与语义标签严格对齐，命名需真实反映元素角色（如 banner 不能误标为 header），grid-area 值须完全匹配且大小写敏感，. 表示真实空白并影响 tab 顺序，全宽区域应统一命名而非拆分，main 和 aside 必须用原生标签而非 class 模拟，布局容器应限层级、保语义，避免 body 直接设为 grid，照片墙等用 section + figure 即可，移动端优先用 grid-template-areas 重排，gap 需配合全局 box-sizing 重置，ie 回退需 @supports 隔离，结构错误（如标签未闭合或嵌套错位）是布局失效主因。
grid-template-areas 必须和语义标签对齐
直接用 grid-template-areas 命名区域，但命名值得和实际标签的语义角色一致，否则会误导人、也干扰辅助技术。比如你把 <aside></aside> 放在顶部视觉区，它仍是“补充信息”，不能硬叫它 header。
常见错误是写成：grid-template-areas: "top top" "main sidebar"，然后让 <aside></aside> 占 top 区域——这等于用样式覆盖语义，读屏器仍按 aside 解读，但开发者看 CSS 以为那是页眉。
-
grid-area值必须和grid-template-areas中的字符串完全一致，大小写敏感，多一个空格就失效 - 用
.表示空单元格，但别为了“排版整齐”补点；它代表真实空白，会影响键盘 Tab 顺序 - 全宽 banner 应该用
grid-area: banner;+"banner banner"，而不是拆两个banner再合并
main 和 aside 不能靠 class 模拟，必须用原生标签
有人写 <div class="main"> + <code><div class="sidebar">，再用 CSS Grid 把它们摆成主栏+侧栏。这样布局能跑，但语义彻底丢失：搜索引擎不识别内容权重，键盘用户无法跳过导航直达 <code>main，aria-labelledby 也找不到锚点。
<main></main> 只能出现一次，且不能嵌套在 <section></section> 或 <article></article> 里；<aside></aside> 必须紧邻相关主内容（比如跟在 <article></article> 后面），不是“随便放右边的盒子”。
- 若 CMS 输出固定
div，只能退而求其次加role="main"或role="complementary"，但这只是补救，不是替代 -
<nav></nav>必须包裹链接，不能只放 logo；否则应改用<header></header>+role="banner" - 用
display: contents替换无意义 wrapper 时要小心——它会让子元素“冒泡”进 Grid，可能打乱语义层级
Grid 容器层级不宜过深，优先包一层语义父容器
别把整个 body 设成 display: grid，再在里面塞十几个 grid-area。DOM 结构会扁平化，失去逻辑分组，JS 查询和媒体查询也难聚焦。
更合理的做法是：用一个 <div class="layout"> 或直接用 <code><main></main> 作为 Grid 容器，内部子项才是真正的语义区块（如 <section class="featured"></section>、<article></article>）。这样既保语义，又控布局。
- 照片墙这类二维密集排列，直接用
<section></section>+display: grid，内部用<figure></figure>，不用额外 div - 避免嵌套两层 Grid：外层定义页面骨架，内层用于卡片网格，中间夹一层
<div class="grid-inner"> 就破坏了语义流<li>移动端堆叠时，优先用 <code>grid-template-rows: auto 1fr auto+grid-template-areas重排，比用flex-direction: column更可控 -
gap只作用于 Grid 项之间，不影响项内子元素，别指望它撑开<h2></h2>和段落间距 - 用
minmax(300px, 1fr)配合auto-fit时，确保父容器有明确 width（如max-width: 1200px），否则 Grid 会无限拉伸 - IE 不支持
gap，需用margin回退，但记得用@supports (gap: 1rem)隔离，避免污染现代浏览器
gap 和 box-sizing 不影响语义，但必须统一重置
语义标签本身没有默认 gap，但浏览器对 <header></header>、<nav></nav> 等有微小 margin/padding 差异。如果 Grid 项之间间距忽大忽小，第一反应不该是加 margin，而是检查是否漏了重置。
* { margin: 0; padding: 0; box-sizing: border-box; } 是底线，否则 gap: 1rem 在某些项上会被 margin 抵消，导致对齐错乱。
真正卡住人的，从来不是 Grid 属性怎么写，而是某处 <div class="main"> 没闭合，或者 <code><main></main> 被套进了 <section></section> 里——结构一歪，后面所有布局都得跟着调。
