grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))可实现真正随容器宽度变化的多栏新闻页，无需媒体查询；每列≥320px保障阅读舒适，auto-fit自动收缩空轨道，子项须为直接子元素且禁设width/float，配合rem间距与响应式字体才能完整生效。
用 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) 就能实现真正随容器宽度变化的多栏新闻页，不依赖媒体查询断点，也不用反复调试像素值。
核心写法：一招撑起自适应列数
新闻卡片网格最怕“卡死”——比如小屏还硬塞三列、中屏留白一大片。直接在容器上写：
-
display: grid启用网格布局 -
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))——每列至少 320px（保障阅读舒适），超出部分均分；auto-fit 会自动收掉空轨道，比 auto-fill 更干净 -
gap: 1.5rem用 rem 单位，高 DPR 屏下间距更稳
卡片本身必须“配合”Grid
模板写对了，子项不守规矩照样崩：
- 新闻卡片必须是网格容器的直接子元素，别多套一层 wrapper div
- 卡片不能设
width、float或display: inline-block，否则会锁死列宽 - 封面图加
max-width: 100%; height: auto;，防止拉伸撑破列宽 - 标题用
justify-self: center居中，只影响标题单元格，不干扰正文排版
窄屏下内容依然可读
Grid 自动堆叠只是第一步，字体、行距、内边距也得同步降级：
- 桌面用
font-size: 1.125rem; line-height: 1.6，移动端切到1rem / 1.5 - 卡片内边距从
1.5rem缩到1rem，避免文字被挤成一团 - 所有
gap和padding都避开 px，优先用 rem 或 em
容易被忽略的父容器陷阱
如果新闻页还是不塌成单列，先别调 minmax 参数，检查这三点：
- 网格容器的父级是否设置了
max-width: 1200px却没配width: 100%？Grid 实际计算宽度可能远超屏幕 - 祖先元素有没有
overflow-x: hidden或white-space: nowrap？会截断 Grid 的自动换行逻辑 - 打开开发者工具，在 Styles 面板看 computed 的
grid-template-columns值——它显示的是浏览器最终解析结果，比猜更准
