CSS 函数 fit-content() 使用公式 min(maximum size, max(minimum size, argument)) 来限制由最小和最大尺寸确定的范围内的给定尺寸。
在 CSS grid 中，fit-content()函数可以用作轨道大小。
在这种情况下，它使用auto来确定最小大小，使用max-content来确定最大大小，这计算方式与 minmax(auto, max-content) 类似。
fit-content() 函数充当 width、height、min-width、min 的框大小说明符-height、max-width 和 max-height。
此用法中的最大和最小尺寸由内容的大小决定。
可能的值
参数 <length> 和 <percentage> 可以传递给 fit-content() 函数。
<length> - 绝对长度。
<percentage> - 在给定轴上，百分比是相对于可用空间计算的。
它与网格容器内的行轨道的块大小和列轨道的内联大小有关网格属性。
除了网格参数之外，它还取决于书写模式以及布局框的可用内联或块大小。
语法
fit-content: length | percentage CSS fit-content(): <length> 值
在下面的示例中，为 grid-template-columns 赋予了 CSS 属性 fit-content()，这使得根据内容调整列的大小，并为 #custom-container 网格内的每列设置最大宽度。
<html>
<head>
<style>
#custom-container {
display: grid;
grid-template-columns: fit-content(200px) fit-content(400px) fit-content(200px);
grid-gap: 10px;
box-sizing: border-box;
height: 250px;
width: 80%;
margin: 20px auto;
background-color: #c43b31;
padding: 20px;
}
#custom-container > div {
background-color: #ffd700;
padding: 15px;
}
</style>
</head>
<body>
<div id="custom-container">
<div>特别信息</div>
<div>这里有更长的描述。 它可能包含超出通常宽度的更多细节和有趣信息。</div>
<div>自适应元素</div>
</div>
</body>
</html> CSS fit-content(): <percentage> 值
在下面的示例中，CSS 属性 fit-content() 应用于 #custom-container 的 grid-template-columns。
它指定列宽度的百分比，使列能够根据相对值动态调整大小容器宽度的百分比，最后一列 (1.2fr) 占据剩余空间。
<html>
<head>
<style>
#custom-container {
display: grid;
grid-template-columns: fit-content(20%) fit-content(30%) fit-content(40px) 1.2fr;
grid-gap: 15px;
box-sizing: border-box;
height: 40%;
width: 100%;
background-color: #7b4a93;
padding: 15px;
}
.custom-box {
background-color: #ecf0f1;
padding: 8px;
}
</style>
</head>
<body>
<div id="custom-container">
<div class="custom-box">
将进酒·君不见 - 唐 李白</div>
<div class="custom-box">
君不见，黄河之水天上来，奔流到海不复回。</div>
<div class="custom-box">
<b>Yxjc123.com</b>
君不见，高堂明镜悲白发，朝如青丝暮成雪。</div>
<div class="custom-box">
人生得意须尽欢，莫使金樽空对月。</div>
</div>
</body>
</html>