横屏下 minmax(120px, 1fr) 失效是因为固定最小值 120px 限制列宽收缩，导致列数无法增加；应改用 clamp(80px, 15vw, 120px) 或媒体查询动态调整最小值，并配合图片自适应、固定单位 gap 等优化。
横屏时 grid 布局显示不全，不是 fr 本身有问题，而是 minmax() 的最小值卡死了列宽，导致浏览器宁可撑出横向滚动条也不折行。
为什么横屏下 repeat(auto-fit, minmax(120px, 1fr)) 会失效
横屏（如 iPhone 横置）视口宽度变大（比如从 375px → 667px），但很多开发者仍沿用竖屏逻辑的 minmax(120px, 1fr)。问题出在：120px 这个硬性最小值，在横屏下反而成了“列数上限”的枷锁——浏览器发现“我能塞下 5 列，但每列不能小于 120px”，结果算下来总宽超容器，就放弃自动填充，退化成单列或少列+留白，甚至触发横向溢出。
-
auto-fit会在空间不足时丢弃空轨道，但前提是列宽能缩；120px不让缩，它就“不敢”多列 - 横屏下
1fr分得的空间变大，但列数没上去，视觉上还是稀疏、留白多 - 如果父容器没设
width: 100%或含padding未用box-sizing: border-box，误差会放大
用媒体查询动态调 minmax() 的最小值
不要一刀切地用固定 120px，横屏需要更小的列宽下限，才能释放列数。直接在横屏媒体查询里改 minmax() 的第一个参数：
.grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
@media (orientation: landscape) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
}
-
@media (orientation: landscape)是最轻量、最可靠的横屏检测方式，比查具体像素更健壮 - 把最小值从
120px降到80px，横屏下就能多塞 1–2 列，布局立刻紧凑起来 - 注意：别无脑压到
40px，太小会导致文字挤成一团，需结合内容实际测试
比媒体查询更稳的方案：用 clamp() 替代固定最小值
媒体查询要写两套规则，而 clamp() 能让最小值随视口平滑变化，一行代码覆盖竖/横屏：
.grid {
grid-template-columns: repeat(auto-fit, minmax(clamp(80px, 15vw, 120px), 1fr));
}
-
clamp(80px, 15vw, 120px)表示：最小不低于 80px，理想是视口宽的 15%，最大不超过 120px - iPhone 竖屏（375px）→ 15vw ≈ 56px → 被下限卡在 80px
- iPhone 横屏（667px）→ 15vw ≈ 100px → 正好落在区间内，列宽自然变窄、列数增加
- 比纯
vw更安全：避免极小屏（如折叠屏半开）下5vw导致列宽崩坏
容易被忽略的配套处理
只调 minmax() 还不够，横屏下图片、文字、间隙常连带出问题：
- 图片必须加
img { width: 100%; height: auto; }，否则固定宽高会撑裂网格 -
gap建议用rem或px，别用%，百分比 gap 在横屏下会异常放大 - 如果用了
grid-column-start/end显式定位，横屏时很可能错位——这类定位应在@media (orientation: landscape)里重置为默认auto - 检查是否意外设置了
white-space: nowrap或overflow: hidden在父层，它们会截断内容却不报错
横屏适配的关键不在“多列”，而在“列宽能弹性收缩”。clamp() + auto-fit 是目前最省心的组合，比反复调试媒体查询像素值更接近问题本质。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
