在 CSS 中，auto-fill 和 auto-fit 是 grid-template-columns 和 grid-template-rows 属性中的关键字，用于控制 CSS Grid 布局中的自动填充行为。尽管它们看起来相似，但作用有所不同。
auto-fill: 填满所有的可用空间，即使内容不足，可能会创建空白的轨道。
auto-fit: 只扩展实际存在内容的轨道，不会创建空白轨道。
下面是它们的详细解释：
1. auto-fill作用: auto-fill 尝试在网格容器中填充尽可能多的列（或行），即使这些列可能没有内容。行为: 如果网格容器的空间允许，它会创建额外的、空白的轨道（列或行）以填满整个容器空间。使用场景: 当你希望网格在容器中填满所有可用空间，而不关心内容的数量时使用。示例:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
} 效果: 如果容器足够宽，会创建尽可能多的 100px 宽度的列。如果容器变大，则增加列的数量，并且这些列可能没有内容，最终填满整个网格容器。
2. auto-fit作用: auto-fit 与 auto-fill 相似，但有一个关键区别：auto-fit 会压缩（折叠）没有内容的列（或行），只保留填满内容的列。行为: 当容器变大时，auto-fit 会尽可能多地扩展已有的内容，但不会像 auto-fill 那样填充空白列（或行）。使用场景: 当你希望只有实际存在内容的轨道扩展并填满可用空间时使用。示例:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
} 效果: 在这种情况下，如果容器变大，已经存在的内容列会扩展以填满空间，但不会创建额外的空白列。未被使用的空间将留空，网格项自动调整宽度。
网友回复
我知道答案，我要回答
私活外包
最新提问
如何破解绕开seedance2.0真人照片生成视频 限制？
python有哪些算法可以将视频中的每个帧图片去除指定区域水印合成新的视频？
iphone的激光雷达数据能否实时传输到three三维空间中？
豆包sora等ai视频生成大模型生成的视频水印如何去除？
python如何实现在电脑上拨号打电话给手机？
具身机器人与人形机器人区别？
nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行？
为啥windows.onerror捕获js错误是这样的{"message":"Script error.","source":"","lineno":0,"colno":0,"stack":null,
2026年ai将全面接管编程？
WebMCP是干啥的？
