fit-content()
尝试一下
该函数可以用作 CSS 网格 属性中的轨道尺寸，其中最大尺寸由 max-content 定义，最小尺寸由 auto 定义，auto 的计算方式与 auto 相似（即，minmax(auto, max-content)），除了轨道尺寸被钳制在参数处，如果它大于 auto 最小值。
有关 max-content 和 auto 关键字的更多信息，请参见 grid-template-columns 页面。
fit-content() 函数也可以用作 width、height、min-width、min-height、max-width 和 max-height 的布局盒子尺寸，其中最大尺寸和最小尺寸指的是内容尺寸。
语法
fit-content() 函数接受 <length> 或 <percentage> 作为参数。
css
/* <length> values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)
/* <percentage> value */
fit-content(40%)
值
<length>-
绝对长度。
<percentage>-
相对于给定轴上可用空间的百分比。
在网格属性中，它相对于网格容器的内联尺寸（列轨道）和网格容器的块尺寸（行轨道）。否则，它相对于布局盒子的可用内联尺寸或块尺寸，具体取决于书写模式。
示例
使用 fit-content 调整网格列大小
HTML
html
<div id="container">
<div>Item as wide as the content.</div>
<div>
Item with more text in it. Because the contents of it are wider than the
maximum width, it is clamped at 300 pixels.
</div>
<div>Flexible item</div>
</div>
CSS
css
#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;
}
结果
规范
| 规范 |
|---|
| CSS 盒子尺寸模块级别 4 # sizing-values |
浏览器兼容性
css.properties.grid-template-columns.fit-content
BCD 表格仅在启用 JavaScript 的浏览器中加载。
css.properties.width.fit-content_function
BCD 表格仅在启用 JavaScript 的浏览器中加载。