如何用CSS Grid实现新闻站点首页复杂分区布局？

最稳妥方案是用grid-template-areas搭配grid-area；要求每行列数一致，空白用.占位；响应式切换时需同步更新grid-template-areas和对应grid-area值，否则布局塌陷。

直接用 grid-template-areas 搭配 grid-area 是最稳妥、可维护性最高的方案，尤其适合新闻首页这种区块语义固定、视觉层级明确的结构。

grid-template-areas 字符串必须严格对齐行列数

新闻首页常见结构是「顶部头条 + 中间三栏（主稿/侧边热点/推荐）+ 底部多列栏目」，对应 4 行 × 多列布局。但 grid-template-areas 要求每行字符串中列数一致，空白处必须用 . 占位：

1. 错误写法：grid-template-areas: "header header" "main sidebar" "footer"; —— 第三行只有 1 列，与前两行 2 列不匹配，整条声明失效
2. 正确写法：grid-template-areas: "header header" "main sidebar" "footer footer"; 或 "header header" "main sidebar" "footer .";
3. 跨区域命名不能拆开：想让 featured 占两行两列，必须写成连续两行都填 "featured featured"，不能第一行写 "featured ." 第二行再补

响应式切换时 grid-area 线号容易越界

桌面端用命名区域，移动端切为单列流式？别直接改 grid-template-areas 字符串——更安全的做法是保留命名，只调整容器的 grid-template-columns 和隐式行为：

1. 桌面端：grid-template-columns: 2fr 1fr; + grid-template-areas: "header header" "main sidebar" "footer footer";
2. 移动端：@media (max-width: 768px) { .container { grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer"; } }
3. 关键点：所有 grid-area 值（如 header）保持不变；改的是“区域怎么排”，不是“项目往哪放”
4. 如果硬要用线号定位（如 grid-area: 1 / 1 / 2 / 2;），务必确认 grid-template-rows 在各断点下定义了足够多的行线，否则数值越界会导致项目消失或错位

图片和标题在格子内对齐常被忽略

新闻卡片里一张图 + 一行标题，占了 2×1 的网格区域，但默认渲染出来图拉伸、字顶边贴死——这不是布局失败，是没控制单元格内部对齐：

1. justify-self: center; 让图片水平居中（只作用于当前项目）
2. align-self: start; 把标题钉在格子顶部，align-self: end; 把来源信息压到底部
3. 图片不失真：img { width: 100%; height: 100%; object-fit: cover; }，缺 object-fit 就会变形或留白
4. 文字块自身对齐靠 text-align 和 line-height，align-self 只管它在整个格子里的位置

真正难的不是写出首屏布局，而是当设计要求「头条图在桌面端横跨两列、平板端占满整行、手机端隐藏」时，grid-template-areas 字符串要逐断点重写，而每个 grid-area 值又得跟着匹配——这里没有报错提示，只有视觉突然错位，且 DevTools 里属性可能被划掉却无任何 warning。