fit-content()

fit-content() は CSS の関数で、指定された寸法を min(max-content, max(min-content, 引数)) の式に従って有効な範囲の寸法に収めます。

試してみましょう

この関数は CSS グリッドのプロパティにおいて、トラックの寸法を max-content で定義された最大寸法と 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 のレイアウトボックスの寸法としても使用され、最大寸法は内容物の最大寸法、最小寸法は内容物の最小寸法になります。

構文

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

css

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

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

値

<length>

絶対的な長さ。

<percentage>

指定された軸で有効な空間に対する相対的なパーセント値です。

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

例

グリッドカラムの大きさを fit-content で指定

HTML

html

<div id="container">
  Item as wide as the content.
  <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>
  Flexible item
</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;
}

結果

仕様書

Specification
CSS Box Sizing Module Level 4
# sizing-values

ブラウザーの互換性

width (および他の大きさのプロパティ) での対応

BCD tables only load in the browser

グリッドレイアウトでの対応

BCD tables only load in the browser

関連情報