【2024年版】CSSグリッドの救世主！fit-content()関数の使い方総まとめ

Decoding the fit-content() CSS Function

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

---

この記事では、CSS関数のfit-content()について詳しく見ていきます。これはCSSの新しい機能で、主にCSSのグリッドモジュールでグリッドレイアウトを構築する際に使用されます。一貫性のあるグリッドレイアウトと構造を作成する際に最も有用なツールの1つです。この記事では、その内部的な動作と、期待した結果が得られない場合がある理由について解説します。

fit-content()は何をする関数なのか？

この関数は、グリッド要素のgrid-template-columnsとgrid-template-rowsプロパティで使用され、グリッドアイテムの寸法を指定します。MDNによると、「fit-content() CSS関数は、min(maximum size, max(minimum size, argument))という計算式に従って、指定されたサイズを利用可能なサイズに制限します。」では、これは実際にどういう意味なのでしょうか？

簡単に言えば、fit-content()は、引数が最小コンテンツサイズより大きく最大コンテンツサイズより小さい場合に、グリッドアイテムのサイズを引数の値にリサイズします。コンテンツが最大サイズを超える場合、引数は無視され、グリッドアイテムは最大コンテンツサイズに設定されます。

この関数は要素の高さと幅の両方を調整するのに使用できます。この記事では両方のケースを見ていきましょう。まずは高さの調整から始めます。

具体例を見てみましょう

以下のような単純なレイアウトを考えてみます：

<div class="grid">
  <div class="item">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

これに以下のCSSを適用します：

.grid {
    display: grid;
    height: 300px;
    width: 500px;
}

.item {
    padding: 1rem;
    font-family:'Arial', sans-serif;
    background-color: antiquewhite;
}

.gridコンテナに500pxの幅と300pxの高さを設定しました。また、グリッドアイテムには見た目を良くするために背景色、タイポグラフィ、パディングを追加しています。

行に対するfit-content()の使用

グリッドアイテムの高さに対するfit-content()関数の影響を見るために、.gridコンテナ要素に以下のCSSを追加します：

.grid {
  display: grid;
  width: 500px;
  height: 300px;
  grid-template-rows: fit-content(10%);
}

ここでは引数として10%を使用していることに注目してください。この値については後で詳しく説明します。

fit-content() CSS関数がコンテナに適用され、グリッドアイテムがコンテンツに合わせてフィットするようになりました。計算式 min(maximum size, max(minimum size, argument)) を見てみましょう。

このケースでは： - minimum size：コンテンツが適切にレンダリングされるために必要な最小の高さです。height: min-contentを適用すると、グリッドアイテムは最小の高さ（106px）になります。 - maximum size：グリッドアイテムが取り得る最大の高さです。height: max-contentを使用すると、同じく106pxとなります。 - argument：コンテナの高さ300pxの10%、つまり30pxです。

これらの値を計算式に当てはめると： min(106, max(106, 30)) = 106

したがって、計算式による高さは106pxとなります。最小コンテンツと最大コンテンツの値が同じであるため、引数の値に関係なく、結果は常に同じになります。

列に対するfit-content()の使用

ここからが、fit-content()関数が真価を発揮する場面です。列ベースのレイアウトに関数を適用してみましょう。.gridコンテナのCSSを以下のように変更します：

.grid {
  display: grid;
  width: 500px;
  height: 300px;
  grid-template-columns: fit-content(10%);
}

ブラウザで確認すると、レイアウトが変更され、グリッドアイテムの幅が減少し、高さがコンテンツに合わせて比例的に増加しているのが分かります。

グリッドアイテムがどのように幅を計算したのか見てみましょう。上記のコードでは、fit-contentに10%を引数として与えています。再度計算式を見てみましょう。

このケースでは： - minimum size：width: min-contentを使用して計算します。テキストコンテンツの場合、最も長い単語の幅まで可能な限り折り返され、約115pxとなります。 - maximum size：width: max-contentで計算され、テキストを1行に配置した場合の幅である1680pxとなります。 - argument：コンテナの幅500pxの10%、つまり50pxです。

これらの値を計算式に当てはめると： min(1680, max(115, 50)) = 115

このように、グリッドアイテムの幅は115pxと計算されました。

では、fit-content()に異なる値を指定してみましょう。引数を200pxに変更します：

.grid {
    display: grid;
    height: 300px;
    width: 500px;
    grid-template-columns: fit-content(200px);
}

この場合、グリッドアイテムは200pxの幅を取ることになります。

計算式で確認してみましょう： min(1680, max(115, 200)) = 200

まとめ

以上です！fit-content()はCSSの新しい機能で、ブラウザサポートには課題がありますが、複雑なレイアウトを作成するための強力なツールです。私自身、フィーチャードニュースエリアを作成する際のテーマ開発で効果的に活用しました。