repeat(auto-fit, minmax(300px, 1fr)) 实现真正响应式列数变化：每列至少300px，浏览器按容器宽度自动增减列数，空列合并，剩余空间由现有列均分；而1fr 1fr 1fr强制三等分无最小宽度，小屏易导致内容挤压变形。
直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 就能实现真正响应式的列数变化，不需要媒体查询也能在手机、平板、桌面自动适配列宽和列数。
为什么 1fr 1fr 1fr 在小屏上会挤成窄条？
因为它是“固定列数”，不是“固定最小宽度”。1fr 1fr 1fr 强制分三等份，哪怕容器只剩 200px 宽，每列也硬要占约 66px，文字折行、图片变形、交互区域过小就都来了。
- 它不关心内容是否可读，只按份数切空间
- 没有最小宽度兜底，
fr会把剩余空间无限压缩 - 想让它“智能”，必须配合
minmax()给每列设下限
repeat(auto-fit, minmax(300px, 1fr)) 到底怎么工作的？
这行代码是响应式 Grid 的核心逻辑，拆开看：
-
minmax(300px, 1fr)：每列至少 300px，最多不超过它应得的那份剩余空间 -
auto-fit：浏览器尽可能多地塞进符合minmax条件的列，没内容的轨道会被合并，列数随容器缩放动态减少 - 如果容器宽 800px，最多放 2 列（2 × 300px = 600px ≤ 800px），剩下 200px 空间由两列均分 → 每列 400px
- 如果容器宽 280px，连一列 300px 都塞不下，结果就是单列、宽度 280px（此时
1fr生效，占满）
移动端显示异常，大概率是这三件事没做
写了 repeat(auto-fit, minmax(...)) 还错位？先检查这些：
- 父容器没设
width: 100%或max-width，导致 Grid 容器宽度计算失准 - 子元素（比如
<img>或<p></p>）没加max-width: 100%，内容撑爆网格项 - 忘了加
box-sizing: border-box，padding/margin 让实际宽度超出了1fr分配范围 - IE11 或旧版 Safari 用户访问？它们不支持
fr，会把整行当 0 渲染——必须用@supports (display: grid)包裹，外层 fallback 用 Flex
auto-fit 和 auto-fill 差在哪？
区别就在“有没有内容”这件事上：
-
auto-fit：只生成有内容的列，空列不占位，剩余空间由现有列拉伸填满 → 更适合卡片流、文章列表等真实内容场景 -
auto-fill：不管有没有内容，只要够放一列（≥ min 宽度），就预留轨道位置 → 常用于需要对齐或预留空白格的仪表盘、棋盘类布局 - 别混用：比如
repeat(auto-fill, 1fr)没意义，1fr没 min/max 约束，浏览器无法判断“够不够放”，行为不可控
真正难的不是写对那一行 CSS，而是理解 fr 不是比例尺，而是“剩余空间分配器”；repeat() 不是循环语法糖，而是轨道生成策略。一旦漏掉 minmax() 的下限，或者忽略子元素自身的尺寸控制，再漂亮的 Grid 也会在真实设备上塌方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
