repeat(auto-fit, minmax(300px, 1fr))是唯一靠谱写法，因浏览器先按300px最小宽度尝试容纳列数，再由auto-fit合并空轨道，最后用1fr均分剩余空间；auto-fill会留白，1fr 1fr则不响应缩放。

为什么repeat(auto-fit, minmax())是唯一靠谱的写法

因为浏览器靠它动态算列数：先按minmax()里设的最小宽度（比如250px）尝试塞列，再用auto-fit把没内容的空轨道合并掉，最后用1fr均分剩余空间。写成auto-fill会留白，只写1fr 1fr则完全不响应宽度变化。

minmax(300px, 1fr)里的两个值到底在控制什么

不是“选一个”，而是同时生效的约束：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 300px是硬门槛：容器宽度
• 1fr不是固定值，是“当前行剩余宽度 ÷ 实际渲染的列数”——哪怕某行只有 1 个子项，它也不会自动占满整行，而是受限于这个计算逻辑
• 手机屏宽常为 375px，若设 minmax(400px, 1fr)，就永远卡在 0 列，内容横向溢出

哪些样式会悄悄让auto-fit失效

Grid 的自动列计算很敏感，以下写法会让它“看不懂”：

• 子项设了width: 200px或flex: 0 0 200px：强行撑开列宽，破坏minmax()下限
• 子项用了position: absolute、float，或包在display: flex容器里：Grid 轨道计算中断，降级为普通块流
• 外层容器有max-width: 1200px但没配width: 100%：Grid 按 1200px 算列数，小屏也显示多列
• grid-auto-flow: column没删：强制列优先填充，换行逻辑彻底失效

调试时怎么看浏览器到底算出了几列

别猜，直接看 DevTools：

• 打开 Elements 面板，选中网格容器
• 在 Styles 侧边栏找到grid-template-columns，点右侧的“computed”标签
• 它会显示类似250px 250px 250px或1fr的实际解析结果——这才是真实列数和宽度
• 如果看到none或空值，说明display: grid没生效，或被祖先元素的overflow: hidden截断了

真正卡住的地方往往不在 Grid 声明本身，而在于子项是否“守规矩”：图片没加width: 100%、文字没设overflow-wrap: break-word、或者父容器意外带了white-space: nowrap——这些都会让auto-fit的计算结果和你预想的差一截。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！