CSS fit-content() 函数

定义和用法

CSS 的 fit-content() 函数允许根据内容调整元素的大小。这种方式类似于元素会使用可用空间，但永远不会超过最大内容大小。

实例

使用 fit-content() 调整网格中列的大小：

#container {
  display: grid;
  grid-template-columns: fit-content(250px) fit-content(250px) auto;
  grid-gap: 7px;
  box-sizing: border-box;
  height: 150px;
  width: 100%;
  background-color: green;
  padding: 7px;
}

亲自试一试

CSS 语法

fit-content(length|percentage)
值 描述
length 指定大小的绝对长度值。
percentage 指定相对于可用空间的百分比大小。

技术细节

版本： CSS4

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

หน้าที่เกี่ยวข้อง

อ้างอิง:CSS ความหลากหลายgrid-auto-columns

อ้างอิง:CSS ความหลากหลายgrid-auto-rows

อ้างอิง:CSS grid-template-columns รายการ

อ้างอิง:CSS grid-template-rows รายการ