这里 是来自 PPK 的一些硬核深度 CSS 极客内容。 如果你能理解 min-content（基于其包含的内容，元素可以达到的最小尺寸）和 max-content（元素内容可以将其撑大的最大尺寸），那么理解 fit-content 就只需要再迈出一步。 正如 PPK 所说，它是以下内容的简写：
.box {
width: fit-content;
/* ... is the same as ... */
width: auto;
min-width: min-content;
max-width: max-content;
}这意味着元素可以在最小值和最大值之间调整大小。
我的大脑总是会想到一个稍微有点复杂的用户界面场景，即居中一个水平导航，出于某种原因需要自己的背景。 min-content 不起作用，因为它会将所有内容压缩得太窄。 max-content 不起作用，因为它不允许换行。 所以 fit-content 正好合适。
PPK 的文章详细介绍了浏览器的怪癖，并包含非常有效的交互式图表，所以一定要阅读它——尤其是在你认为自己对 CSS 非常了解的情况下，因为当你开始使用 CSS 网格中的 fit-content() 函数时，它会让你很快感到谦卑。 例如，1fr fit-content(200px) 1fr 在模板中是如何发挥作用的？
1fr min(min(max-content, available-size), max(min-content, 200px)) 1fr注意：“其中 available-size 是网格中可用的宽度。” 呼！