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，但它会把“空”的列去掉，并让有内容的列扩展，以填满整个容器。
Seede AI
AI 驱动的设计工具
586 查看详情 
同样代码，只改关键字：
.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 “后拉伸”。根据是否希望空白轨道存在来选择。
以上就是css grid自动填充auto-fill和auto-fit区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1069671.html
微信扫一扫 
支付宝扫一扫 
