minmax() 在移动端 Grid 中为单列设定弹性区间：最小宽度固定、最大宽度自适应，配合 auto-fit 实现列数自动调整；需同步约束子元素样式并注意旧版 Safari 兼容性。
minmax() 在移动端 Grid 布局中到底起什么作用
它不是“让卡片变小”，而是给 grid-template-columns 中的单列设定一个**弹性区间**：最小不能小于某个值，最大可撑满可用空间。在移动端窄屏下，minmax(280px, 1fr) 意味着每列至少占 280px，超出部分由所有列均分——这直接决定了“一排几列”。
常见错误是写成 minmax(280px, auto) 或 minmax(280px, max-content)，结果卡片强行拉宽、溢出容器、触发横向滚动——1fr 才是让列数自适应的关键。
怎么写才能让 375px 宽手机自动切为单列
关键不在 minmax 本身，而在 grid 容器的总列数推导逻辑。你需要配合 grid-auto-flow: dense 和合理断点，但更稳妥的做法是用 minmax() + auto-fit：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 这行代码会让浏览器按 280px 最小宽度尝试塞列，塞不下就自动减少列数 - 在 375px 屏上，280px 占满后只剩 95px 余量，不够再塞一列，于是只渲染 1 列
- 别漏掉
gap：设gap: 12px后，实际可用宽度要减去 gap 占用（比如两列需预留一个 gap，三列需两个）
为什么卡片内容溢出或高度不一致
minmax 只管列宽，不管行高。卡片内部若图片没设 max-width: 100%、文字没限制行数、价格标签用绝对定位脱标，都会导致网格项高度失衡，引发错位或空白塌陷。
必须同步约束子元素：
- 图片统一加
img { width: 100%; height: auto; display: block; } - 标题用
display: -webkit-box; -webkit-line-clamp: 2;截两行 - 避免在卡片内用
position: absolute脱离文档流——它会让 grid 无法正确计算行高 - 必要时给卡片加
min-height（如min-height: 240px），防内容过少时高度塌缩
兼容性与真机调试要注意什么
iOS 14.5+、Android Chrome 86+ 支持完整 auto-fit + minmax，但旧版 Safari（iOS 13.x）对 auto-fit 渲染不稳定，可能卡死或漏列。
实操建议：
- 真机测试必开 Safari 开发者工具远程调试，别信模拟器
- 加降级方案：
@supports not (grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))) { ... }里补 Flex 布局 - 避免在
minmax()里写百分比（如minmax(20%, 1fr)），某些安卓 WebView 会解析失败
真正难的不是写出那行 repeat(auto-fit, minmax(280px, 1fr))，而是卡片内部每个元素是否都尊重了这个“最小宽度边界”。稍有松动，整个网格就从整齐变成参差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
