应使用 repeat(auto-fit, minmax(250px, 1fr)) 实现自适应列数，避免小屏溢出；gap 用 8px 或 12px 而非 rem；媒体查询仅微调间距或内边距，不重定义网格；Grid 中避免混用 px 和 fr 单位。
用 repeat(auto-fit, minmax()) 替代固定列数
手机屏幕宽度从 320px（老款 iPhone）到 480px（大屏安卓）不等，硬写 grid-template-columns: 1fr 1fr 1fr 在小屏上必然溢出滚动。真正有效的做法是让列数自动伸缩：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))。这句的意思是：每列最小 250px，最大占满剩余空间；容器不够宽时，自动减少列数、换行堆叠。
注意两点：一是 minmax() 第一个参数不能太小（低于 200px 文字会挤成一团），二是 auto-fit 比 auto-fill 更实用——它会收缩空轨道，避免占位空白。
gap 值要设得小且用 px，别用 rem 或 em
移动端手指操作需要留足点击空间，但又不能浪费屏幕。用 gap: 8px 或 gap: 12px 是稳妥选择。千万别用 gap: 1rem——在 iPhone SE 这类小屏设备上，1rem 可能等于 16px，两列卡片之间就剩不下多少内容宽度了。
实测发现：当卡片最小宽度设为 250px、gap 为 12px 时，375px 宽的 iPhone 屏刚好显示一列；414px 宽可勉强撑开两列；再宽就自然扩展。这个组合对主流机型兼容性最好。
立即学习“前端免费学习笔记（深入）”；
媒体查询只补漏，不主控布局逻辑
Grid 本身就能响应式，媒体查询不该用来“重写整个网格”，而应只处理明显断裂点。比如：@media (max-width: 375px) 下把 gap 从 12px 改成 8px，或把卡片 padding 缩小一点；@media (min-width: 414px) and (max-width: 480px) 下微调 minmax() 的下限到 260px。
常见错误是写一堆断点去分别定义 grid-template-columns，结果维护成本飙升，还容易漏掉某个尺寸。真正需要媒体查询干预的，往往只是字体大小、内边距、或某块区域的 grid-row 顺序调整。
避免在 Grid 里混用固定像素和 fr 单位
比如 grid-template-columns: 80px 1fr 200px 在手机上很危险：左侧图标栏 80px 虽小，但右侧 200px 的操作区在 320px 屏上直接占掉 2/3 宽度，主内容只剩不到 40px —— 实际渲染会强制缩小或触发横向滚动。
正确思路是：所有列都用弹性单位。如果必须保留某区域固定，就把它抽出来用 position: sticky 或单独包裹，别塞进同一层 Grid 容器里。Grid 的强项是均分与比例，不是混合控制。
