核心思路是用grid-template-columns配合媒体查询实现响应式列数控制，默认多列、小屏单列，并需同步调整gap和子项min-width；更可靠的是grid-auto-fit+minmax()，可自动适配不同屏幕宽度而无需硬编码列数。
用 grid-template-columns 配合媒体查询控制列数
核心思路是：默认设为多列（比如 repeat(3, 1fr)），在小屏下用媒体查询覆盖为单列（1fr）。注意不能只改列数，还要处理 gap 和子项的 min-width，否则窄屏里内容可能溢出或换行异常。
- 推荐用
minmax(300px, 1fr)替代纯1fr，避免小屏下单列过窄 - 媒体查询断点建议用
max-width: 768px，覆盖主流手机竖屏宽度 - 别忘了加
viewportmeta 标签，否则媒体查询在 iOS Safari 可能不触发
为什么 grid-auto-fit + minmax() 比硬写 repeat() 更可靠
硬写 repeat(3, 1fr) 在手机上会强制撑出三列，内容被严重压缩。而用 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))))，浏览器会根据容器宽度自动计算最多能放几列——手机上自然就变成一列，平板可能两列，桌面保持三列或四列。
-
auto-fit会合并空轨道，auto-fill则保留空位，优先选auto-fit -
minmax(320px, 1fr)中的320px是最小列宽，低于此值就不新增列 - 这个写法无需媒体查询也能响应，但复杂布局中仍建议搭配媒体查询微调间距和字体
手机端单列时常见错位问题怎么修
即使列数变成一列，如果子元素有固定宽度（如 width: 300px）、浮动、或设置了 grid-column: span 2，依然会破坏单列流式效果。
- 删掉所有显式
grid-column/grid-row跨列声明 - 把子项的
width改成max-width: 100%，并设box-sizing: border-box - 检查是否有
white-space: nowrap导致文本不换行，手机上要允许折行
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))));
gap: 1rem;
}
<p>@media (max-width: 768px) {
.container {
gap: 0.75rem; /<em> 手机减小间隙 </em>/
padding: 0 1rem;
}
.container > * {
font-size: 0.9rem;
}
}</p>网格布局的自适应本质不是“切换列数”，而是让列宽阈值和容器宽度动态博弈。最容易被忽略的是子项自身的尺寸约束——哪怕网格定义再合理，一个 width: 400px 的卡片在 iPhone 上照样会横向滚动。
立即学习“前端免费学习笔记（深入）”；
