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; }- 行/列线编号从 1 开始，外边框也算一条线（即 n 行有 n+1 条线）
-
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
复杂多行多列真正难的不是写出来，而是当内容高度不一致、跨行后影响后续轨道、或嵌套 grid 遇上 flex 容器时，浏览器的隐式行为很难预测。建议先用 outline: 1px solid red 检查每个网格项的实际占位，再调样式。