grid-template-areas用字符串直观定义语义化网格区域，每行引号内空格分隔列，同名字符串自动合并；需列数一致、名称合法、空白用.占位；配合grid-template-rows/columns控制尺寸，fr/minmax()/repeat()提升响应式能力；单元素跨行跨列用grid-row/column指定线号，推荐span语法；auto-fit+minmax()实现动态列数；调试优先用outline检查实际占位。
grid-template-areas 直观定义多行多列区域当布局有明确语义区块（比如 header / sidebar / main / footer），grid-template-areas 是最接近“画格子”的写法，视觉上一目了然，也方便后期调整结构。
注意每对引号代表一行，引号内用空格分隔列，相同名称的字符串会自动合并成一个连续区域。
body {
display: grid;
grid-template-areas:
"
header header header"
"sidebar main main"
"footer footer footer";
grid-template-rows: 80px 1fr 60px;
grid-template-columns: 240px 1fr 320px;
}
grid-template-areas 中的名称必须是合法标识符（不能含中划线、数字开头等）. 占位，表示该格子留空；多个 . 可连写（如 ..），但不推荐混用空格和点，易出错grid-template-rows 和 grid-template-columns 精确控制行列尺寸当需要响应式或动态尺寸时，避免硬写像素值。常用组合：fr（弹性份额）、minmax()（最小/最大约束）、auto（内容撑开）、fit-content()（上限由内容决定）。
例如三栏布局：左侧固定 200px，中间自适应，右侧最小 300px、最大占满剩余空间：
.container {
display: grid;
grid-template-columns: 200px 1fr minmax(300px, 1fr));
}
1fr 不等于 100%，它按比例分配剩余空间，不是绝对宽度minmax(200px, 1fr) 在容器窄时保底 200px，宽时最多拿走一份剩余空间repeat(4, 1fr) 替代手写 1fr 1fr 1fr 1fr，更简洁且可配合 auto-fit 做响应式列数调整grid-row / grid-column 控制单个元素跨行跨列模板定义好后，具体元素通过 grid-row 和 grid-column 指定起止线（line number），而非区域名。这是最灵活也最容易出错的地方。
比如让一个卡片横跨第二、三行，从第一列到第四列：
.card {
grid-row: 2 / 4;
grid-column: 1 / 5;
}
2 / 4 等价于 2 / span 2，但后者更直观表达“跨两行”意图grid-row: 10 / 12 但总共只有 5 行），元素会被挤到末尾并可能溢出容器@media 重写整个模板直接在 grid-template-areas 或 grid-template-columns 上用 minmax() + auto-fit + repeat() 组合，能减少断点数量，也更易维护。
例如实现“小屏单列 → 中屏双列 → 大屏四列”的卡片流：
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
auto-fit 会让空轨道塌缩，auto-fill 则保留空轨道，通常选 auto-fit
gap 上用百分比，它只接受长度单位（px, rem, em）或 normal
width，会和 grid-template-columns 冲突，优先级取决于是否显式指定了 grid-column
outline: 1px solid red 检查每个网格项的实际占位，再调样式。