小屏失效是因为minmax(240px, 1fr)最小值240px过高，窄屏（如375px）减去gap后不足两列所需宽度，导致仅能容纳一列；需配合媒体查询降为minmax(120px, 1fr)等适配小屏。
为什么 auto-fill + minmax(240px, 1fr) 在小屏上会失效
直接把桌面端的 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) 拿到手机上，大概率只出一列，甚至卡片被横向压缩变形。这不是 Grid 不行，而是 minmax(240px, 1fr) 的最小值卡死了列宽下限——当屏幕宽度
必须用媒体查询主动降维：
-
@media (max-width: 768px)内把最小宽度降到160px，中屏（如 iPad）可用200px - 同步缩小
gap：桌面常用16px，移动端建议8px或12px，避免间距吃掉内容空间 - 别只改列宽——
font-size、padding也得响应式缩放，否则文字撑破格子或太小不可读
图片错位、底部多出 4px 空白的硬解法
这不是 Grid 的 bug，是 <img> 默认 vertical-align: baseline 导致的基线对齐残留空白。任何“微调 margin”或“line-height: 0”的方案在不同字号/字体下都会失准。
唯一可靠写法只有两个：
- 给图片加
display: block（推荐，语义清晰、无副作用） - 或显式设
vertical-align: top（兼容性稍好，但需注意父容器内其他 inline 元素） - 顺手加上
width: 100%; height: auto;，防图片溢出或拉伸失真
grid-auto-rows 必须写成 minmax(100px, auto)，不能简写
写成 grid-auto-rows: 100px → 图片被裁剪、文字换行错乱、卡片底部堆空白；写成 grid-auto-rows: auto → Chrome 90 前版本直接忽略，整行塌陷；写成 fit-content() → CSS 规范不支持，无效。
minmax(100px, auto) 是唯一跨浏览器稳妥解：
-
100px防止极矮卡片（比如纯图标+文字）高度塌缩到看不见 -
auto允许真实内容自然撑开，文字多就高，图片高就高，不硬截断 - 别信“小行高更精细”——设成
10px再靠grid-row-end: span X手动控制，已属 JS 辅助范畴，纯 CSS 场景没必要自增复杂度
dense 模式在移动端必须禁用
grid-auto-flow: dense 虽能让卡片填满空隙、视觉更紧凑，但它会打乱 DOM 渲染顺序。在移动端尤其危险：
- 用户用手指滑动时，焦点顺序错乱，Tab 键或辅助设备无法按视觉流导航
- 卡片含链接/按钮时，键盘用户可能跳过关键操作区
- 某些安卓 WebView 对
dense支持不稳定，偶发重排卡顿
正确做法是保持默认 grid-auto-flow: row，接受自然留白。真要极致紧凑，应由 JS 动态计算插入位置，而非依赖 CSS 自动重排——但这已超出“快速搭建”范畴。
最易被忽略的是：auto-fill 和 minmax() 的组合行为，在小屏、空数据、动态加载初期，会暴露得最彻底。别等上线后被反馈“首页只有一列”，提前在 320px 宽度下手动验证列数是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
