fit-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>
を受け付ける関数です。
/* <length> 値 */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)
/* <percentage> 値 */
fit-content(40%)
値
<length>
-
絶対的な長さ。
<percentage>
-
指定された軸で有効な空間に対する相対的なパーセント値です。
グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。
例
グリッドカラムの大きさを fit-content で指定
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
#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
関連情報
- 関連する大きさのキーワード:
min-content
,max-content
- 関連する CSS グリッドプロパティ:
grid-template
,grid-template-rows
,grid-template-columns
,grid-template-areas
,grid-auto-columns
,grid-auto-rows
,grid-auto-flow
- グリッドレイアウトガイド: Line-based placement with CSS Grid
- グリッドレイアウトガイド: Grid template areas - Grid definition shorthands