fit-content是一个CSS函数，用于设置网格轨道尺寸为内容所需宽度与指定最大值中的较小者。语法为fit-content(＜length＞|＜percentage＞)，常用于grid-template-columns中，使列宽随内容自适应且不超过上限。例如fit-content(200px)表示宽度由内容决定，但最大不超过200px，适合侧边栏+主内容布局。可与minmax()结合使用，如minmax(100px, fit-content(200px))，实现最小100px、最大200px内的自适应。典型应用场景包括用户卡片、表单等需内容对齐又保持整洁的界面，兼顾响应式与视觉平衡。
CSS Grid中的fit-content是一个非常实用的函数，用于让网格轨道（grid track）的尺寸根据内容自动调整，同时限制其最大宽度。它常用于创建既响应式又内容敏感的布局，避免过度占用空间。
fit-content 是什么？
fit-content()本质上是一个CSS函数，语法为：fit-content( <length> | <percentage> )。它的作用是将元素或网格轨道的尺寸设置为“内容所需尺寸”和“指定最大值”之间的较小者。
具体行为如下：
- 如果内容所需宽度小于设定的最大值，轨道宽度等于内容宽度（类似
max-content） - 如果内容所需宽度大于设定的最大值，轨道宽度被限制为该最大值
这使得布局既能适应内容，又能防止某列过宽影响整体结构。
立即学习“前端免费学习笔记（深入）”；
在 grid-template-columns 中使用 fit-content
最常见的用法是在定义网格列时结合fit-content，让某一列宽度随内容变化但不超出限制。
示例代码：
.container {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
gap: 16px;
}
上面代码表示：
- 第一列宽度由内容决定，但最大不超过200px
- 第二列占据剩余空间（1fr）
- 适合侧边栏+主内容区的布局，比如头像信息+文本描述
实际应用场景举例
假设你有一个用户信息卡片，包含头像、姓名和简介：
.profile {
display: grid;
grid-template-columns: fit-content(80px) 1fr;
align-items: center;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
.name { font-weight: bold; }
.bio { color: #666; }
这里即使名字很短，头像列也不会缩得太小（受内容最小约束），也不会因图片大而撑满整行（受限于80px上限），实现了良好的平衡。
与 minmax() 结合使用更灵活
有时你想给fit-content加个最小值，可以用minmax()包裹：
grid-template-columns: minmax(100px, fit-content(200px)) 1fr;
含义是：这一列最小100px，最大不超过200px，中间则随内容自适应。这样能更好地控制响应式行为。
基本上就这些。fit-content 在 Grid 中的核心价值就是“智能自适应”——既尊重内容，又服从布局约束，特别适合卡片、表单、列表等需要内容对齐又保持整洁的场景。
