css grid自动填充auto-fill和auto-fit区别

auto-fill会创建尽可能多的轨道并保留空白，auto-fit则只创建有内容的轨道并拉伸填满空间。例如容器宽500px、最小列宽100px时，auto-fill始终生成5个轨道（空位保留），而auto-fit仅生成实际需要的列数并扩展占满剩余空间，实现紧凑布局。区别在于是否保留空白轨道。

在 CSS Grid 布局中，auto-fill 和 auto-fit 都用于配合

repeat()

函数自动创建网格轨道，尤其在使用

minmax()

时非常有用。它们看起来相似，但在行为上有关键区别。

auto-fill：填充可用空间，即使格子为空

当使用 auto-fill 时，Grid 容器会尽可能多地创建符合最小宽度要求的列（或行），即使这些列没有内容也会被创建出来。空白的轨道会保留在布局中。

例如：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

只要容器宽度允许，哪怕没有足够子元素，也会生成多个 100px 起步的列。如果有空余空间，这些列会平均分配空间（因为用了 1fr），但不会合并空白列。

立即学习“前端免费学习笔记（深入）”；

auto-fit：只创建有内容的列，并拉伸填满空间

auto-fit 的行为类似 auto-fill，但它会把“空”的列去掉，并让有内容的列扩展，以填满整个容器。

同样代码，只改关键字：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

这时 Grid 只创建刚好容纳子元素的列数，并且这些列会拉伸占据所有剩余空间。适合实现“紧凑自适应”布局。

直观对比场景

假设容器宽 500px，每列最小 100px：

• auto-fill：最多可放 5 列 → 创建 5 个轨道，即使只有 2 个子元素，剩下 3 个为空
• auto-fit：只创建 2 列 → 然后这 2 列拉伸占满 500px

基本上就这些。简单记：auto-fill “先占位”，auto-fit “后拉伸”。根据是否希望空白轨道存在来选择。