auto-fit + minmax() 更可靠，因其根据容器实时宽度动态计算列数，避免媒体查询在中间宽度（如850px）出现留白或挤压；minmax(320px, 1fr)确保每列不低于阅读舒适宽度且剩余空间均分，auto-fit收缩空轨道而auto-fill保留空白列，语义更清晰、适配更精准。
直接用 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) 就能实现分栏自适应，不需要写一堆媒体查询——但前提是容器宽度可变、子项不设固定宽，否则会卡死列数或撑破布局。
为什么 auto-fit + minmax() 比媒体查询更可靠？
多数人写响应式文章页时，第一反应是用 @media 控制列数：比如 768px 切两列、1200px 切三列。问题在于真实设备宽度参差不齐（折叠屏展开后常为 850px，平板横屏可能 920px），硬切容易在中间宽度出现留白或挤压。
-
auto-fit会让浏览器根据当前容器可用宽度，动态计算最多能放几列，只要每列 ≥320px 就继续铺；低于阈值就自动收为单列 -
minmax(320px, 1fr)中的320px是阅读最小舒适宽度（低于此值字太挤），1fr表示剩余空间均分，避免列宽突变 - 比
auto-fill更安全：auto-fill会渲染所有潜在列（含空格），影响语义和屏幕阅读器
文章卡片必须满足的三个条件
哪怕 Grid 模板写对了，子项不配合也会失效——常见错误是卡片本身带固定宽度或浮动干扰。
- 移除所有
width、float、display: inline-block类型的显式宽度控制 - 确保文章卡片是
.article-list的**直接子元素**，不能套多一层div再包卡片（否则 Grid 只作用于外层div） - 图片需加
max-width: 100%; height: auto;，否则拉伸会撑破列宽，尤其在小屏下
移动端堆叠但保持内容可读性的细节
单纯靠 Grid 自动堆叠还不够，字体、行高、内边距在窄屏下必须重调，否则文字糊成一团。
立即学习“前端免费学习笔记（深入）”；
- 别只改
grid-template-columns，同步缩小font-size和line-height：比如桌面用1.125rem/1.6，移动端降到1rem/1.5 -
gap值建议用rem或em，避免像素单位在高 DPR 屏上过小；gap: 1.5rem在 iPhone SE 和 iPad 上表现更一致 - 如果文章标题需要居中或加粗，优先用
justify-self: center而非给卡片加text-align: center，前者只影响标题所在网格单元，后者会影响整块内容流
真正容易被忽略的是：Grid 容器的父级如果有 overflow-x: hidden 或 max-width 设得太死，会截断自动计算出的列宽，导致 auto-fit 失效——检查父容器宽度是否被意外限制，比反复调 minmax() 参数更重要。
