小屏幕grid内容挤压的根源是列数未随视口动态减少，应使用repeat(auto-fit, minmax(280px, 1fr))替代固定列数，并为子项设min-width: 0、图片设width: 100%、gap和align-items响应式调整。
小屏幕下 Grid 内容相互挤压，不是因为 gap 太小或字体太小，而是列数没随视口变窄而减少——repeat(3, 1fr) 在 375px 宽的手机上仍强行分三列，每列只剩约 100px，文字挤、按钮叠、图片糊。核心解法是让列数动态收缩，同时确保子项不“塌陷”。
用 repeat(auto-fit, minmax()) 替代固定列数
硬写列数是多数人踩的第一个坑。浏览器不会“智能缩放”你写的 repeat(3, 1fr)，它只会把三列塞进窄屏里，然后压垮内容。
-
auto-fit让浏览器根据容器宽度，动态计算能放几列；列宽按minmax(280px, 1fr)弹性伸缩，不足 280px 就自动降为一列 - 别用
auto-fill：它会渲染所有可能列（包括空列），影响语义和可访问性，还可能触发意外横向滚动 -
280px不是固定值——若卡片含 200px 图 + 两边 16px padding，最小值至少设为minmax(232px, 1fr)，再加点余量更稳
子项必须显式重置 min-width
写了 minmax(280px, 1fr) 却还是塌成一条线？问题大概率出在子项自身：min-width: auto（图片、空 div、flex 容器默认值）会无视轨道最小值，直接缩到 0。
- 给网格项显式加
min-width: 0，尤其当它内部是display: flex或含<img>时 - 图片必须配
width: 100%、height: auto、max-width: 100%，否则 Grid 轨道拉伸会导致失真 - 禁用
white-space: nowrap（除非真需要），否则单行长文本会撑爆列宽，反而触发横向滚动 - 长单词或 URL 必须加
overflow-wrap: break-word，否则min-content可能等于整个单词宽度，远小于你设的 280px
小屏下 gap 和对齐方式要同步调小
列数和轨道宽度调对了，但卡片高度不一、间隙过大、对齐拉伸，视觉上依然显得乱、挤、空。
-
gap必须响应式缩小：小屏用gap: 0.75rem，别沿用桌面端的1.5rem，否则两侧padding+gap容易把内容推出视口 - 网格容器加
align-items: start，否则默认stretch会让短内容卡片被拉高，破坏节奏 - 卡片本身加
min-height: 240px+display: flex+flex-direction: column，让内部元素对齐可控 - 图片区域优先用
aspect-ratio: 4/3+object-fit: cover，比靠父容器高度计算更稳，避免 iOS Safari 中因高度未定导致的布局抖动
真正难的不是记住 minmax() 语法，而是调试时盯住三点：开发者工具中看网格项的「Computed」→ min-width 是否为 0 或 auto；width 实际值是否接近你设的最小阈值；以及有没有隐式横向滚动——尤其在 iOS Safari 里，grid-auto-flow: column 或未设 overflow-x: hidden 的容器很容易漏掉这点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
