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)

技術的詳細

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

相关页面

参考：CSS grid-auto-columns 属性

参考：CSS grid-auto-rows 属性

参考：CSS grid-template-columns 属性

参考：CSS grid-template-rows 属性