grid-area四值写法必须写全，否则项目“飘走”；正确格式为row-start/column-start/row-end/column-end，缺一不可，如.hero{grid-area:1/1/3/4}。
grid-area 四值写法必须写全，否则项目“飘走”
直接用 grid-area 定位是杂志排版最稳的方式——它把起止行列一次性锁死，避免 grid-column 和 grid-row 分开写时漏掉某一项。常见错误是只写两个或三个值，比如 grid-area: 1 / 1，浏览器会补 auto，结果元素卡在左上角第一格不动。
正确写法必须是四值：grid-area: row-start / column-start / row-end / column-end，一个都不能少。例如：
.hero { grid-area: 1 / 1 / 3 / 4; }
表示从第 1 行线、第 1 列线开始，到第 3 行线、第 4 列线结束（占 2 行 × 3 列）。
- 数值必须对应真实存在的网格线：没定义
grid-template-rows时，grid-area: 2 / 1 / 4 / 3很可能无效，因为第 4 条行线根本不存在 - 负数线号可用：
grid-area: 1 / -3 / -1 / -1表示顶部两行、右侧最后两列，适合右上角信息栏 - 命名区域和数字线号不能混用：
grid-area: header / 2 / 4 / 5是非法的——要么全用名字，要么全用数字
grid-template-areas 更适合整页结构，但拼图规则极严
杂志常有固定区块：header、main、sidebar、footer。这时用 grid-template-areas 搭配 grid-area 名字更直观，视觉结构一目了然。
立即学习“前端免费学习笔记（深入）”；
但它的“拼图规则”非常严格：每行必须用独立引号包裹，引号内空格分隔列，换行分隔行；少一组引号，整条声明就失效，DevTools 里该属性会被划掉，所有子元素退回流式布局。
正确写法示例：
.container {<br> display: grid;<br> grid-template-areas:<br> "header header header"<br> "main main sidebar"<br> "footer footer footer";<br>}
- 每行引号内区域名数量必须一致，空位必须用
.占位，比如"main . sidebar" - 区域名只能含字母、数字、短横线，禁止空格、下划线、点号：
main-content合法，main content和main_content都非法 -
grid-area的值不加引号：grid-area: header;✅，grid-area: "header";❌（CSS 语法错误） - 响应式切换时，媒体查询里重写
grid-template-areas字符串即可，比逐个改grid-area值更干净
跨行跨列后内容对齐容易被忽略
元素占了 2×3 的格子，但文字默认顶左对齐，图片可能被拉伸变形——这不算“排版完成”。必须显式控制内部对齐。
-
justify-self: center让内容水平居中（只影响当前项目） -
align-self: start把标题钉在顶部，align-self: end把作者信息压到底部 - 图片填满格子又不失真：加
object-fit: cover或contain，并设width: 100%; height: 100% - 文字块内部用
display: flex; flex-direction: column;+justify-content: space-between实现首尾对齐
嵌套 Grid 容器时，grid-column-start 线号作用域易错
杂志常有“封面 > 栏组 > 文章卡片”三层结构。如果中间层（如“专题栏组”）本身是 display: grid，它的子元素的 grid-column-start 是相对于该栏组自身的网格线，而非整个版面。
- 父栏组没设
grid-template-columns，子元素的线号按默认单列计算，grid-column-start: 3直接失效（无第 3 条线） - 想让子卡片对齐全局网格？得把布局逻辑上提一层，避免嵌套 Grid；或者用
position: absolute+inset模拟对齐 - 头条“破栏”出血设计，推荐用
grid-column: 1 / -1（指向容器右边缘），比硬算线号更鲁棒；但注意 Safari 对负线号支持较晚（iOS 16.4+ 才稳定）
杂志排版真正难的不是画格子，而是每个格子里的内容如何呼吸——对齐方式、缩放行为、文本流走向，这些细节一旦漏掉，再精准的网格也会显得僵硬。
