胖蔡说技术CSS函数fit-content()属于网格函数，除此之外的网格函数还有：minmax()、repeat()。顾名思义，这三个函数只能在网格布局中使用。fit-content()函数主要是用于给定布局可用大小，适应内容，其功能等同于：min(maximum size, max(minimum size, argument))。函数格式如下：
/* <length> values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)
/* <percentage> value */
fit-content(40%)fit-content()接收一个参数，可以是长度值或者是百分比值，当为长度值时支持各种格式的固定长度，如：px、cm、vw、ch等。当参数为百分比值，相对于给定轴中可用空间的百分比。在网格属性中，它与列轨道中网格容器的内联大小和行轨道中网格容器的块大小相关。否则，它与布局框的可用内联大小或块大小相关，具体取决于书写模式。
浏览器兼容性
使用示例
如下通过示例来理解fit-content()函数具体的使用方式和布局配置理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fit-content函数实现内容自适应示例</title>
<style>
#container {
display: grid;
grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container>div {
background-color: #8ca0ff;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div>与内容等宽.</div>
<div>
根据给定内容，当内容小于300px，则宽度与内容等宽，当内容大于300px，则宽度为300px.
</div>
<div>弹性宽度</div>
</div>
</body>
</html>展示样式：
从上方的示例可以看出，当给定的内容大于设置宽度，则容器宽度等于设置宽度，内容自动换行，当给定内容小于设置宽度则容器宽度等于内容宽度。
