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 屬性