grid: auto-fit 和 auto-fill区别

🚀 先看基本例子（核心结构一样）

css 复制代码

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

或

css 复制代码

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

两个的作用都是：

👉 自动根据容器宽度决定有多少列

最小宽度 200px，最大自动填满空间。

区别只在：容器能放下更多列时 "空格子要不要显示"。

🎯 auto-fill VS auto-fit 的真正区别（一句话）

关键点	auto-fill	auto-fit
空轨道（空列）	保留	折叠（不占空间）
感觉	"尽可能铺满网格"	"尽可能让元素贴到一起"
用途	想要保持固定网格数量	想让元素自适应排列（常用）

简化理解：

auto-fill：填满网格
auto-fit：把空网格折叠起来，让元素自动拉伸

📘 图像化解释（最容易记住）

假设容器宽度够放 5 列，每列最小 200px，但你只有 3 个元素。

🧱 auto-fill 的情况

复制代码

| box | box | box | □ | □ |

仍然保留"空列"
看起来网格还在，只是没有内容
现有元素不会拉宽成等分宽度，而是保持 minmax 设定

🧲 auto-fit 的情况

复制代码

|          box           |          box           |          box           |

空列折叠消失
三个元素会拉伸等分整个容器
看起来像"三列布局"

🔥 看代码就能明白的效果

✔ auto-fill：保留空列

css 复制代码

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

布局特点：

网格中暗藏空轨道
页面变化时会意外出现"空白列"
不常用于实际布局（除非需要严格网格）

✔ auto-fit：折叠空列（最常用）

css 复制代码

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

布局特点：

项目自动撑满可用空间
元素会自动"贴在一起"
响应式更自然
Tailwind / Material UI 推荐的用法

🧪 对比示例（核心区别）

假设容器宽：900 px

列最小：200 px

那最多可摆：4 列

但你只有 2 个元素

▶ auto-fill 会这样：

复制代码

| item | item | □ | □ |

空列还在。

▶ auto-fit 会这样：

复制代码

|           item           |           item           |

空列折叠，不占空间。

🎯 如何选择？（记住这一条就够）

⭐ 想做"自动响应式宫格" → 用 auto-fit（90% 场景）

比如：

商品列表
图片瀑布流
卡片布局
表单控件自动换行
UI 栅格系统

推荐写法：

css 复制代码

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

⭐ 想保持严格的网格结构 → 用 auto-fill

比如：

可拖拽的表格网格
需要空格占位的设计工具
像素网格编辑器

🏁 最终总结（最简记忆版）

auto-fill = 保留空列，不让元素挤占它们
auto-fit = 折叠空列，让元素撑满空间（更自然）

90% 情况下，用 auto-fit。