直接用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))即可实现按容器宽度自动增减列数的响应式布局，无需媒体查询；其核心在于auto-fit折叠空轨道、minmax()设定每列最小宽度与弹性上限，使浏览器动态计算并均分剩余空间。
三栏布局用 display: grid 最省事
直接用 grid 切三栏，不用浮动、不用 Flex 嵌套，语义清晰、响应式也容易控制。关键不是“怎么分三栏”，而是“内容如何自然流进格子”。grid-template-columns: repeat(3, 1fr) 是起点，但真实新闻列表往往需要间隙、对齐和最小宽度约束。
常见错误是写成 grid-template-columns: 1fr 1fr 1fr 后发现小屏下挤成一列——其实缺了 grid-auto-flow: column 或媒体查询兜底。更稳妥的做法是：
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))—— 让浏览器按内容最小宽度自动决定列数，桌面端自然三栏，平板可能两栏，手机一栏 - 加
gap: 1rem控制间距，别依赖margin，否则网格项错位 - 每条新闻用
article包裹，别用div，方便后续加语义化样式或 JS 操作
图片高度不一致导致三栏错位怎么办
新闻卡片里常有标题+摘要+缩略图，缩略图尺寸各异，grid 默认按内容高度撑开，结果就是三栏底部不齐——这不是 bug，是 grid 的默认行为（align-items: stretch）。
解决方式不是给图片设固定高，而是让卡片自身高度统一：
- 在卡片容器（比如
article）上加display: flex; flex-direction: column;，再设height: 100% - 图片用
object-fit: cover; height: 120px;，并设父容器overflow: hidden - 标题和摘要用
flex: 1占满剩余空间，避免文字多时卡片被拉长
别用 align-items: start 粗暴对齐顶部——那样底部参差更明显。
点击某条新闻时如何高亮且不破坏三栏结构
用 :focus-within 或 JS 切换 class 都行，但要注意：高亮边框或阴影会撑开元素，导致该卡片宽度变大，Grid 自动重排，其他两栏跟着跳。
预防方式很简单：
- 所有卡片统一加
outline: 2px solid transparent，聚焦时只改outline-color，不改变盒模型 - 如果要用
box-shadow，提前预留空间：margin: -2px抵消阴影外扩，或者用transform: scale(1.01)配合z-index - 避免在
:hover里改width或padding，这类属性必然触发重排
IE11 下 grid 不支持，要不要降级
真要兼容 IE11，别硬塞 grid 的 polyfill，它对复杂布局支持极差。更实际的方案是用 float 降级，但必须满足两个前提：
- HTML 结构保持语义不变（仍是
article并列），CSS 用@supports not (display: grid)隔离 -
float方案里每栏加width: calc(33.333% - 2rem)，配合margin-right控制间隙，最后一项清浮动 - 务必测试移动端：
float在小屏下需用width: 100%+clear: both强制单列
现在多数项目已放弃 IE11，但如果客户明确要求，降级代码得单独维护，别混在主样式里——否则未来删掉时容易漏掉残留逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
