用 grid-template-areas 统一规划新闻首页骨架最稳妥，需在容器定义命名区域（如 “header header advert” “main main sidebar”），子元素通过 grid-area 对号入座；广告横跨全列用 grid-column: 1 / -1，视频焦点区设 grid-row: span 2 与 aspect-ratio: 16/9；卡片网格推荐 repeat(auto-fill, minmax(300px, 1fr)) 并配 grid-auto-rows: minmax(150px, auto)；移动端必须重写 grid-template-areas 才能真正转单列。
用 grid-template-areas 统一规划整体骨架
新闻首页最头疼的不是卡片怎么排，而是顶部导航、右侧边栏、穿插广告、视频焦点区、多列页脚这些区域怎么不打架。硬套 float 或层层 position: absolute 会迅速失控。直接上 CSS Grid 的命名区域是最稳的起点。
-
grid-template-areas必须写在容器上，且每一行引号内用空格分隔列名，换行即换行 —— 写错一个空格或漏引号，整个布局就塌 - 像
"header header header" "advert main sidebar" "footer footer footer"这种写法，本质是定义了 3 行 × 3 列的“坐标地图”，后续所有子元素靠grid-area对号入座 - 注意：命名区域不能含连字符（
video-feature会报错），建议用下划线（video_feature）或驼峰（videoFeature）
广告和视频焦点区这类“破格内容”怎么跨格
新闻流里插广告、头条视频横跨两栏，不是靠 JS 计算位置，而是用 Grid 的行列跨度原生支持 —— 关键是别混用 grid-column 和 grid-area，否则覆盖逻辑难预测。
- 广告位想横跨全部列？写
grid-column: 1 / -1，比grid-column: span 3更安全（列数变化时不会断） - 视频焦点区要占两行高且保持 16:9？除了
grid-row: span 2，必须加aspect-ratio: 16/9；只设宽高比不设height，否则在 flex 容器里可能被压缩失效 - 如果该区域有子内容（如标题 + 播放按钮），记得给它设
display: grid或display: flex，否则子元素默认还是普通文档流，撑不满父格
新闻卡片网格用 auto-fill 而不是 auto-fit
卡片数量动态、屏幕宽度多变，用 repeat(auto-fill, minmax(300px, 1fr)) 是主流做法，但很多人没意识到 auto-fit 在某些浏览器（尤其是旧版 Safari）里对空格处理更激进，容易导致最后一行卡片突然挤成一列。
-
auto-fill会提前预留所有可能的轨道，哪怕没内容也占位；auto-fit会合并空轨道 —— 看似省空间，实则让响应式断点更难控制 - 卡片高度不一致时，加
grid-auto-rows: minmax(150px, auto)比固定height更健壮，避免文字截断或留白过大 - 别忘了
gap是网格级属性，不是卡片自己的margin；如果卡片内部还有 padding，两者叠加可能超出预期间距
移动端降级时，grid-template-areas 重写比媒体查询内联更可靠
小屏下把三栏压成单列，不是靠 grid-template-columns: 1fr 就完事 —— 如果不重写 grid-template-areas，原来定义的“header header header”还在，浏览器仍按三列解析，只是每列变窄，侧边栏可能被挤到第二行下方，而不是你想要的“header → main → sidebar”垂直顺序。
立即学习 “ 前端免费学习笔记（深入）”；
- 在
@media (max-width: 768px)里，必须重新声明完整的grid-template-areas，比如"header" "main" "sidebar" "advert" "footer" - 此时
grid-template-columns: 1fr才真正生效；否则即使写了，Grid 仍按旧区域映射，行为不可控 - 测试时重点看广告位是否还在正确位置 —— 它最容易因区域名缺失或顺序错乱而“消失”或叠在其他内容上
复杂点不在语法多难，而在区域命名一旦定死，后续所有模块都得严格对齐这个“地图”。改一个名字，全量回归测试；漏一个 grid-area，那个区块就脱离布局体系 —— 这不是 bug，是 Grid 的契约精神。
