これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSSfit-content() 関数は、指定された寸法を min(最大寸法, max(最小寸法, 引数)) の式に従って有効な寸法に制約します。

/* <length> 値 */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* <percentage> 値 */
fit-content(40%)

この関数は CSS グリッドのプロパティにおいて、トラックの寸法を max-content で定義された最大寸法と auto で定義された最小寸法との間で、 auto と似た方法 (すなわち minmax(auto, max-content)) で計算しますが、 auto の最小値よりも大きい場合は 引数 がトラックの寸法になるという点が異なります。

これは width, height, min-width, min-height, max-width, max-height にレイアウトボックスの寸法としても使用され、最大寸法は内容の最大寸法、最小寸法は内容の最小寸法になります。

構文

引数として <length> または <percentage> を受け付ける関数です。

<length>
絶対的な長さ。
<percentage>
指定された軸で有効な空間に対する相対的なパーセント値です。
グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。

形式文法

fit-content( [ <length> | <percentage> ] )

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;
}

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 Intrinsic & Extrinsic Sizing Module Level 3
fit-content() の定義
草案 width, height, min-width, min-height, max-width, max-height のレイアウトボックスの寸法としての関数を定義。
CSS Grid Layout
fit-content() の定義
勧告候補 トラックの寸法として使用される際の関数を定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
fit-content()Chrome 完全対応 29Edge 完全対応 16Firefox 完全対応 51IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 51Opera Android 完全対応 43Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,