このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
fit-content()
fit-content() はCSS の関数で、指定された寸法をmin(最大サイズ, max(最小サイズ, 引数)) の式に従って有効な範囲の寸法に収めます。
試してみましょう
grid-template-columns: fit-content(8ch) fit-content(8ch) 1fr;grid-template-columns: fit-content(100px) fit-content(100px) 1fr;grid-template-columns: fit-content(40%) fit-content(40%) 1fr;<section> <div> <div> <div>One この列には多めのテキストが入っています。</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> </div></section>#example-element { border: 1px solid #c5c5c5; display: grid; grid-gap: 10px; width: 250px;}#example-element > div { background-color: rgb(0 0 255 / 0.2); border: 3px solid blue; text-align: left;}この関数は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 のレイアウトボックスの寸法としても使用され、最大寸法はコンテンツの最大寸法、最小寸法はコンテンツの最小寸法になります。
構文
css
/* <length> 値 */fit-content(200px)fit-content(5cm)fit-content(30vw)fit-content(100ch)/* <percentage> 値 */fit-content(40%)値
<length>絶対的な長さです。
<percentage>指定された軸で有効な空間に対する相対的なパーセント値です。
グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。
形式文法
<fit-content()> =
fit-content(<length-percentage>)
<length-percentage> =
<length>|
<percentage>
例
グリッドカラムの大きさを fit-content で指定
HTML
html
<div> <div>コンテンツの幅のアイテム。</div> <div> テキストが多いアイテムです。コンテンツが最大幅より広いため、 300 ピクセルで固定されています。 </div> <div>柔軟なアイテム</div></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 Grid Layout Module Level 2 # funcdef-grid-template-columns-fit-content |
| CSS Box Sizing Module Level 3 # funcdef-width-fit-content |