css grid自动填充auto-fill和auto-fit区别-css教程-PHP中文网

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

P粉602998670

发布： 2025-09-19 10:35:01

原创

259人浏览过

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

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

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

repeat()

登录后复制

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

minmax()

登录后复制

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

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

例如：

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

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

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

稿定AI社区

在线AI创意灵感社区

同样代码，只改关键字：

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

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

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

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

以上就是css grid自动填充auto-fill和auto-fit区别的详细内容，更多请关注php中文网其它相关文章！

大家都在看：