如何使用CSS Grid创建复杂的艺术化排版

grid-area四值写法必须写全且对应真实网格线，命名区域需严格匹配、引号包裹、行列数一致，二者不可混用，否则布局失效。

直接用 grid-area 四值写法或 grid-template-areas 命名区域，是实现艺术化杂志排版最可控的方式——前者锁死行列起止，后者让结构一目了然，但两者都极易因语法细节失效。

grid-area 四值写法必须写全，否则元素“飘走”

常见错误是只写两个或三个值，比如 grid-area: 1 / 1 或 grid-area: 1 / 1 / 3。浏览器会补 auto，结果元素卡在左上角第一格不动，而不是你预期的跨行跨列。

• 正确格式只能是 grid-area: row-start / column-start / row-end / column-end，四个数值一个都不能少
• 数值必须对应真实存在的网格线：没定义 grid-template-rows: 100px 1fr 200px 时，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），视觉结构清晰，但写错一个字符整条声明就失效，DevTools 里该属性会被划掉，所有子元素退回流式布局。

• 每行必须用独立引号包裹，引号内用空格分隔列名，换行分隔行；少一组引号，整条声明失效
• 所有行的列数必须一致，空白位置必须用 . 占位，不能留空格或省略
• 区域名只能含字母、数字、短横线，不能有下划线或空格；每个名字在模板中至少出现一次，否则 grid-area: "xxx" 匹配失败
• 跨多行多列的区域，对应位置必须填相同名字，不能拆开写，比如 "main main sidebar" 和 "main main footer" 才表示 main 占两行两列

跨行跨列后内容对齐常被忽略

元素占了 2×3 的格子，但文字默认顶左对齐，图片可能拉伸变形——这不算完成排版。

立即学习“前端免费学习笔记（深入）”；

• justify-self: center 让内容水平居中（只影响当前项目）
• align-self: start 把标题钉在顶部，align-self: end 把作者信息压到底部
• 图片填满格子又不失真，需加 object-fit: cover 或 contain，并设 width: 100%; height: 100%
• 文本块内部对齐要用 text-align 和 line-height 配合，align-self 只控制块级容器在格子内的位置

真正难的不是写出第一版布局，而是当设计稿要求某区块在桌面端跨 3 行 2 列、在平板端变成 2 行 3 列、在手机端堆叠成单列时，如何让 grid-template-areas 字符串切换不崩、grid-area 线号不越界、内部对齐不重叠——这些地方没有报错，只有视觉错位，调试起来最耗时间。