移动端grid拥挤的根本原因是列数未随屏幕变窄而减少，应使用repeat(auto-fit, minmax(280px, 1fr))替代固定列数，并配合gap合写、align-items: start、min-height及aspect-ratio等协同调整。
移动端 Grid 布局显得拥挤，根本原因不是 gap 太小，而是列数没随屏幕变窄而减少——repeat(3, 1fr) 在 375px 宽的 iPhone 上仍强行分 3 列，每列只剩约 100px，文字挤、图片缩、按钮叠。
用 minmax() + auto-fit 替代固定 repeat()
硬写列数是最大误区。改用弹性轨道定义，让浏览器自己算能放几列：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))是当前最稳方案：每列至少 280px（适配主流手机竖屏内容宽度），容器够宽就多列，不够就自动降为 1 列 - 别用
auto-fill：它会渲染所有可能列（包括空列），影响语义和可访问性 - 280px 不是 magic number——若卡片含 200px 宽图+左右 padding，这里就得 ≥220px；留 60px 余量更安全
媒体查询中只重写 grid-template-columns，别动 gap 单独调
gap 本身响应式能力弱，单独在媒体查询里改 row-gap 或 column-gap 容易失效（尤其旧版 Safari）：
- 统一用
gap: 16px（非row-gap: 16px），合写才保兼容 - 移动端断点内直接增大
gap值：@media (max-width: 767px) { .grid { gap: 16px; } } - 避免父容器带
overflow: hidden——它会把因gap推开后超宽的子项裁掉，看起来像gap消失了
别忽略 align-items 和 min-height 对“视觉拥挤感”的影响
列数和间距调好了，但卡片高度不一，依然会显乱、显挤：
-
align-items: start必加在 grid 容器上，否则默认stretch会让短内容卡片被拉高，破坏节奏 - 给每个卡片设
min-height: 240px（按图文组合估算），再配合display: flex; flex-direction: column控制内部对齐 - 图片用
aspect-ratio: 4/3; object-fit: cover，比height: 100%更稳，不依赖父容器高度计算
真正难的不是写对某一行代码，而是意识到：移动端拥挤从来不是单一属性问题。列数、间距、对齐、高度约束必须协同调整，且每一处都要验证是否在真实设备上触发了隐式滚动或内容截断——比如 iOS Safari 里 grid-auto-flow: column 配合小屏，极易悄悄激活横向滚动条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
