小屏幕下应优先用repeat(auto-fit, minmax(280px, 1fr)))实现响应式单列，配合调小gap、必要时切换grid-auto-flow，并约束grid-auto-rows防止隐式轨道失控。
小屏幕下 grid-template-columns 多列变单列很常见，但别直接写 1fr
直接用 grid-template-columns: 1fr 确实能强制单列，但会丢失响应式弹性——比如内容本身很窄时，它仍会撑满整行，浪费空间。更稳妥的做法是用 minmax() 配合 auto-fit 或 auto-fill，让浏览器自动计算可容纳的最小列数。
实际建议：
- 优先用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))))—— 小屏下每列至少 280px，不足就自动回退为 1 列 - 避免在媒体查询里重复定义整个
grid-template-columns，除非你明确要固定列数（如从 4 列强制切到 2 列） -
auto-fit会把剩余空间分给现有列，auto-fill则保留空轨道，日常布局推荐auto-fit
媒体查询中改 grid-column-gap 比改 columns 更影响体验
很多人只关注列数变化，却忽略间隙（gap）在小屏上容易造成挤压或溢出。比如桌面设 grid-column-gap: 2rem，小屏不调小，两侧 padding 再一加，内容可能直接被挤出视口。
关键调整点：
立即学习“前端免费学习笔记（深入）”；
