应使用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))控制栏数，确保每栏不窄于280px且宽屏下均分剩余空间；图文跨栏需语义化显式控制，避免自动填充错位；图片与文字基线对齐需用flex和align-self调整，禁用width:100%改用object-fit；响应式断点精简为480px、768px、1024px三档。
用 grid-template-columns 控制栏数，但别硬设固定宽度
报纸排版的核心是“视觉流动”而非像素对齐。直接写 grid-template-columns: 200px 200px 200px 会导致小屏断裂、图文比例失衡。应该用 fr 单位配合 minmax()：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))。这样既保证每栏不窄于 280px（适配图片最小可读宽度），又能在宽屏下自动均分剩余空间。注意
auto-fit 和 auto-fill 的区别：前者会合并空轨道，后者保留所有预设列槽——图文混排必须选 auto-fit，否则空白栏会撑开布局。
grid-column 跨栏要配合内容语义，不能只看视觉效果
标题跨两栏、大图跨三栏这类操作，容易只写 grid-column: span 2 就完事。但实际中，如果后续元素没明确起始位置，Grid 会按源顺序自动填充，导致跨栏后的内容错位。正确做法是给关键元素加语义化类名并显式控制：
.lead-image { grid-column: span 3; }
.news-item:nth-child(2) { grid-column: 1 / -1; }尤其注意 nth-child 在动态插入内容时可能失效，更稳妥的是用 :has()（需检查浏览器支持）或服务端/JS 注入 data 属性后选择 [data-role="featured"]。
图片和文字在 Grid 中的基线对齐问题比想象中严重
CSS Grid 默认按 align-items: stretch 拉伸子项，但图片有固有宽高比，文字块高度随内容变化，结果就是同一行里图文底部参差不齐。这不是 bug，是 Grid 按盒模型计算的结果。解决方式不是强行设 height，而是：
- 对图片容器加
display: flex; align-items: flex-start; - 文字区域用
align-self: start;覆盖默认拉伸 - 避免给
img直接设width: 100%，改用object-fit: cover+ 显式容器宽高约束
响应式断点不是越多越好，重点守住三个关键宽度
报纸式排版真正需要干预的断点其实就三个：480px（单栏，移动端）、768px（双栏，平板竖屏）、1024px（三栏，桌面基础宽度）。再多的断点只会让 grid-template-columns 和 grid-row 规则互相覆盖。实操建议：
- 用
@container替代@media（如果父容器支持 size containment） - 对图文卡片本身设
container-type: inline-size;，让布局逻辑靠近内容 - 避免在
@media中重复定义整个 grid，只覆盖grid-column或grid-row等局部属性
minmax(350px, 1fr) 在中间断点悄悄生效了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
