minmax() 的第一个值约束网格轨道（列）最小宽度而非卡片本身，其生效依赖容器宽度、列定义和卡片内部约束三者协同；误设卡片 width 会破坏自动列数计算，应移除卡片宽高限制并规范内部内容溢出处理。
minmax() 里的第一个值就是最小宽度，但它控制的是“列”不是“卡片”
很多人误以为 minmax(280px, 1fr) 的 280px 是卡片本身的最小宽度，其实它约束的是**网格轨道（即列）的最小可用宽度**。只要容器总宽 ≥ 280px × 当前列数，Grid 就会尝试塞下那么多列；否则自动减少列数——所以真正起作用的是这个值和容器宽度的比值关系。
常见错误是把卡片自身设了 width: 300px 或 min-width: 300px，这会直接卡死 Grid 的自动计算：浏览器一看“这卡死活不肯缩”，就只能勉强塞一列，哪怕容器明明够放两列。
- 卡片容器上删掉所有
width、min-width、max-width（除非你明确要锚定视觉宽度，比如加max-width: 400px） - 确保父容器有明确宽度来源：比如
width: 100%、flex: 1、或脱离文档流后的实际渲染宽度 - 用开发者工具看
grid-template-columns计算结果，如果显示repeat(1, 1fr)却预期是 2 列，大概率是父容器宽度为 0 或被压缩
280px 不是 magic number，得看内容和设备
写死 minmax(280px, 1fr) 很容易在 iPhone SE（375px 宽）上出问题：280px × 2 = 560px > 375px，结果永远只出一列，但卡片又太宽，文字挤成多行，图片比例崩坏。
更稳妥的做法是把最小列宽设得更保守，或者动态调整：
- 基础款：从
minmax(240px, 1fr)起手，兼顾小屏可读性 - 防挤压：用
minmax(min(280px, 100%), 1fr)，确保单列时不会超屏 - 断点兜底（仅必要时）：
@media (max-width: 480px) { grid-template-columns: 1fr; }，避免 Safari 旧版或极端窄屏异常
图片和文字撑破卡片？那不是 Grid 的问题
Grid 控制的是列宽分配，不管卡片内部怎么溢出。minmax() 再准，也拦不住一张 width: 500px 的图硬顶开网格项。
必须同步处理卡片内部：
-
img标签加width: 100%; height: auto;，否则固定尺寸图会撑高整行 - 长单词或 URL 溢出：加
word-break: break-word;或overflow-wrap: break-word; - 统一盒模型：
box-sizing: border-box;，防止padding和border加到minmax()计算外
auto-fit 和 auto-fill 对最小宽度的影响完全不同
auto-fit 会把空轨道收缩掉，让剩余空间重新均分——这是你要的“自适应”；auto-fill 则保留所有可能列位，哪怕没内容，导致小屏下强行双列+横向滚动，minmax(280px, 1fr) 就失效了。
验证方法很简单：只放 2 张卡片，宽度刚好够 3 列时，auto-fit 显示 2 列且等宽拉伸，auto-fill 显示 3 列、最后一列空白。
- 卡片列表、商品展示、文章摘要 → 无条件选
auto-fit - 需要预留拖拽槽位、JS 动态插入、或配合
grid-template-areas布局 → 才考虑auto-fill - 别混用：
repeat(auto-fit, minmax(280px, 1fr))是完整单元，改一个词逻辑全变
最小宽度最终生效，靠的是三者咬合：容器宽度、列轨道定义、卡片内部约束。漏掉任何一环，minmax() 就只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
