auto-fit + minmax 是核心组合，因 auto-fit 自动合并空轨道、minmax() 提供列宽弹性约束（最小280px，超出则1fr均分），二者协同实现容器宽度变化时列数与列宽的实时自适应。
为什么 auto-fit + minmax 是核心组合
因为 Grid 本身不响应屏幕尺寸，真正起作用的是 auto-fit 的自动收缩行为和 minmax() 对单列宽度的弹性约束。它让浏览器在渲染时“实时计算”：当前容器能塞下几个 ≥ 指定最小宽度的列，然后把多余空间均分给真实存在的卡片。
常见错误是写成 repeat(auto-fill, minmax(280px, 1fr))——auto-fill 会强行占满所有可能轨道，小屏下出现空列、卡片被挤压变形；而 auto-fit 会把没内容的列直接合并掉，视觉上更干净。
-
minmax(280px, 1fr)表示每列至少 280px，大了就用1fr均分剩余宽度（不是固定最大值） - 必须配合明确的父容器宽度（比如
width: 100%或带max-width的限制），否则 Grid 容器可能不收缩，导致始终只显示一列 - Safari ≤15.6 和旧版 Firefox 对
1fr在小屏下的拉伸行为略有差异，建议测试时用真实设备或 Safari 技术预览版
如何避免卡片被 gap 或 padding 撑出预期列数
Gap 是安全的，它不参与 minmax() 的宽度计算；但卡片自身的 padding、border 或外边距会影响内容可用空间，间接导致“明明设了 280px，却只排了 2 列”的错觉。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 统一用
gap: 1rem控制卡片间距，别在卡片上用margin - 卡片自身设
box-sizing: border-box，确保padding和border不额外加宽 - 卡片内部内容（如图片）用
width: 100%，不要设固定宽高 - 如果卡片有标题/文字，注意字体大小和行高在小屏下是否溢出，这不会影响列数，但影响可读性
什么时候必须加媒体查询
纯 auto-fit 方案在绝大多数场景下够用，但以下情况绕不开媒体查询：
- 需要在特定断点强制单列（比如移动端必须严格堆叠，哪怕容器宽度 > 300px）
- 希望大屏下最多只显示 4 列，而不是无限扩展（
auto-fit会随容器变宽继续加列） - 卡片内嵌视频或 iframe，其固有宽高比在小屏下严重失真，需单独控制尺寸
- IE11 兼容需求——它完全不支持
auto-fit，只能退回到 Flex +flex-wrap
34% 这个数值是怎么来的
它不是魔法数字，而是为了锁死「最多两列」而设计的动态下限。当写成 minmax(max(150px, 34%), 1fr)，本质是让最小轨道宽度随容器变窄而升高：宽屏时 34%
34% 是经验安全值，略大于 100%/3 ≈ 33.33%，目的是防止三列意外出现。如果 gap 加大到 30px，可微调为 35%～36%；若卡片最小宽度改为 200px，则对应百分比需重新估算。
真正容易被忽略的是：这个方案依赖容器宽度的连续变化。如果父容器用了 inline-grid 或未设宽，或者被浮动元素干扰，max(150px, 34%) 就会失效——它需要一个明确、可测量的上下文宽度才能计算百分比。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
