先记住这个答案
grid-area 用在网格项目上时，可一次指定四条边界线：row-start / column-start / row-end / column-end。例如 1 / 1 / 3 / 3 从第 1 条行线和列线开始，到两轴的第 3 条线结束，占两行两列。它还可以写成 grid-area: main，引用容器定义的命名区域；两种语法看着相近，含义却不同。
- 四段顺序是行始、列始、行终、列终
- 数字指定网格线而非格子
span表示跨过多少条轨道- 单个名称可引用命名区域
用四条线围住一块区域
Grid 的轨道是线与线之间的空间。两列网格有三条列线，别把「第 3 条线」理解成「第 3 列」。做一个覆盖左上角四格的卡片时，起点写 1，终点写 3，区域正好跨两个轨道。行和列的顺序也容易记错：前两段是两轴的起点，后两段才是两轴的终点。
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
}
.card {
grid-area: 1 / 1 / 3 / 3;
/* 第 1 到第 3 条线之间，覆盖 2 行 2 列 */
}如果将第三段写成 span 2，含义是从行起点跨两条行轨，而不是指定第 2 条行线。grid-area: 1 / 1 / span 2 / span 2 在这个例子里会得到同样区域，但当起点改变时，更容易看出它表达的是跨度。
名称形式与数字形式
容器用 grid-template-areas 写了 "main main" 等区域字符串后，项目可写 grid-area: main。浏览器会使用该区域对应的四条边界线定位。项目不关心区域在第几行，响应式断点修改区域图时，仍可使用同一个名称。
若没有定义区域，单个自定义名称还有命名线解析规则；因此排查定位错误时，应检查容器的区域图与线名，不能简单地认为任何字符串都能创建区域。grid-area 只指定项目的位置，不负责给容器创建轨道模板。
四值写法的顺序是行起点、列起点、行终点、列终点，斜杠把四条边界分开。不要按“左、上、右、下”这样的盒模型顺序记。比如 grid-area: 2 / 1 / 4 / 3 表示从第二行线到第四行线、第一列线到第三列线，覆盖两行两列。若只写区域名，则由已定义的命名区域解析，不需把四个线号展开。
容易答错的地方
- 说四段是上、下、左、右
- 真实顺序是行起点、列起点、行终点、列终点。把第二、第三段对调后，项目可能跑到意料之外的位置。
- 把终点线算作一格
- 起止线围出的是中间轨道，终点线不额外代表一格。从线 1 到线 3 跨两格。
面试官还会怎么问？
只写 grid-area: main 时发生什么？
它会按名称寻找对应边界线；最常见的情况是容器用 grid-template-areas 定义了 main 区域。
grid-area 和 grid-row 有什么关系？
grid-row 只管行轴的起止线，grid-area 同时覆盖行轴与列轴的四个定位属性。
项目指定的终点超出显式网格会怎样？
Grid 会按需要创建隐式轨道，不会因为超出模板就简单丢弃项目；隐式轨道尺寸由自动轨道属性控制。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。