fit-content() ファンクション
fit-content() ファンクションは、エレメントの内容に合わせた大きさを計算する CSS のファンクションです。
fit-content() には fit-content とこの fit-content() があります。
基本的には同じ意味ということですが、前者は width プロパティでも使用できます。後者は width プロパティで利用できず、 grid-template-columns、grid-template-rows で使用できるのみです。
display: grid;
grid-template-columns: fit-content(400px) 1fr;
詳しくは Example を参照してください
fit-content() は、エレメントをその内容の大きさに合わせるや、display:grid; においてグリッドアイテムの幅を指定する grid-template-columns や高さを指定する grid-template-rows で機能するようです。
引数のない fit-content は、width や height プロパティで、幅を指定する必要がない場合に利用します。
1fr は残りに合わせるというファンクションです。
fit-content() は、min(max-content, min(min-content, コンテンツの大きさ)) で評価しています。
まず、コンテンツの大きさと引数である最小幅の指定 min-content で小さい方を取得します。そして、取得した値と最大の幅 max-content で小さい方を取得するようです。
ページ内 Index
構文(Syntax)
CSS
fit-content( CSS の長さ ) または fit-content
引数
引数のタグエレメントの属性名です。取得できる値は String で、スタイルシートの指定値としては使えません。
Example
以下は fit-content() ファンクションの例です。 fit-content() ファンクションはエレメントの内容に合わせた大きさを計算するファンクションです。
ここでは、width プロパティで使用する場合、 grid-template-columns で使用する場合を試しています。
width での fit-content
width で fit-content を使用しています。エレメントの幅がそのコンテンツの大きさに合わせています。
fit-content() と指定してみてください。機能しなくなります。
display:grid; での fit-content()
以下は、display:grid; においてグリッドアイテムの幅を指定する grid-template-columns で fit-content() を使用した例です。
上記の例では fit-content() を使っているために内容に合わせて幅が変わります。fit-content() を使わずに固定した幅を指定した場合は以下のように表示されます