商品列表在桌面是四列，手机上也硬挤四列，文字被压成一列字。碰到这种情况，我一般先确认改动有没有真的生效。
原因不复杂，列定义使用了固定列数，没有根据可用宽度自动调整，窄屏时每列被压到只有几十像素。
「grid 自适应列」这个问题文档写得含糊，实际行为以当前版本为准，别照旧版本的结论套。别只看报错的最后一行，往上看几行，真正的起因通常在上面。
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
同类问题如果隔一段时间又出现，多半是某个定时任务或重启流程把改动冲掉了。把这次用到的命令存进笔记，比记住结论有用，换个环境还能照着走。
改完隔一天再看一次，当场正常不代表能稳住。测试环境和线上的差别，往往就在版本号和那几行被忽略的配置上。
具体做法是，改用自动填充并按最小宽度约束；给容器留出间距；小屏单独降列。
最后用这个标准收尾，窄屏自动变两列或一列，宽屏自动增加列数。