このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CSS 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 class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">
<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 のレイアウトボックスの寸法としても使用され、最大寸法はコンテンツの最大寸法、最小寸法はコンテンツの最小寸法になります。
構文
/* <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
<div id="container">
<div>コンテンツの幅のアイテム。</div>
<div>
テキストが多いアイテムです。コンテンツが最大幅より広いため、 300 ピクセルで固定されています。
</div>
<div>柔軟なアイテム</div>
</div>
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;
}
結果
仕様書
| 仕様書 |
|---|
| CSS Grid Layout Module Level 2 # funcdef-grid-template-columns-fit-content |
| CSS Box Sizing Module Level 3 # funcdef-width-fit-content |
ブラウザーの互換性
css.properties.grid-template-columns.fit-content
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
css.properties.width.fit-content_function
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。