在 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;
} 效果: 在这种情况下，如果容器变大，已经存在的内容列会扩展以填满空间，但不会创建额外的空白列。未被使用的空间将留空，网格项自动调整宽度。
网友回复
我知道答案，我要回答
私活外包
最新提问
阿里云ESA、cloudflare worker、腾讯云EdgeOne网站代理托管哪家更好？
剪映能打开.fcpxml格式的文件吗？
增量式编码器与绝对式编码器的区别是啥？
有没有开源的单张照片或者序列帧图片或视频就能重建4d场景动画项目？
chrome网页突然报错：错误代码：RESULT_CODE_KILLED_BAD_MESSAGE
openai的codex如何全程无需手动确认自动修改文件？
阿里云oss前端上传文件直传如何限制文件类型？
阿里云oss前端获取policy签名直传oss上传文件回调如何传？
如何将根据三维物体通过提示词变成可交互的4d场景动画？
浏览器中实时摄像头离线视觉ai模型有吗？
