固有サイズ設計: コンテンツ基準のサイズ設定

Jen Simmonsが提唱したIntrinsic Designとは、明示的なピクセル寸法を指定するのではなく、コンテンツに自らのサイズを決めさせる考え方です。CSSには、ブレークポイントごとの上書きに頼らず、レイアウトを自然にレスポンシブにするintrinsic sizingキーワードが用意されています。

min-content：コンテンツがはみ出さずに収まる最小サイズです（テキストの場合は、単語の境界ごとに折り返します）。max-content：折り返さず、コンテンツを1行で表示するために必要なサイズです。どちらも実際のコンテンツの寸法を反映します。

fit-contentはmin(max-content, max(min-content, available))と同等です。利用可能な領域まではコンテンツに合わせて広がり、それを超えると折り返します。テキストと同じ幅にしつつ、コンテナの幅を超えないようにしたいボタンやラベルに最適です。

grid-template-columnsのminmax(min, max)は、トラックの最小サイズと最大サイズを設定します。minmax(200px, 1fr)を指定すると、少なくとも200pxの幅を持ち、必要に応じて広がる列が作成されます。auto-fillと組み合わせると、コンテンツのサイズに応じて自然にレスポンシブになるグリッドを作成できます。

どちらも、行に可能な限り多くのトラックを配置します。auto-fillは空のトラックを維持するため、列数が保たれます。auto-fitは空のトラックを折りたたむため、配置済みのトラックが領域いっぱいに広がります。利用可能な幅いっぱいに広がるコンテンツ主導のレイアウトには、auto-fitを使用します。

clamp(min, preferred, max)は、値を指定した範囲内に制限します。font-size: clamp(1rem, 2.5vw, 1.5rem)は、ビューポートの幅に応じて1remから1.5remの間で拡大縮小します。メディアクエリを使わずに流動的なタイポグラフィを実現できます。

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr))は、非常に狭いビューポートでは1列になり、空間に余裕ができると自動的に列を追加するレスポンシブなグリッドを作成します。メディアクエリもJavaScriptも必要ありません。

aspect-ratio: 16/9を指定すると、幅が変化しても要素の比率が維持されます。width: 100%と組み合わせれば、動画コンテナが親要素いっぱいに広がり、JavaScriptやパーセント指定のpaddingハックを使わずに常に16:9を保てます。

Intrinsic Designは、CSSの論理プロパティ（inline-size、block-size、margin-inline）と組み合わせることで、横書きと縦書きのどちらでも機能するレイアウトを実現します。Intrinsic Sizingは、書字方向にも自動的に適応します。

固定：width: 300px — コンテンツに関係なく常に300pxです。Intrinsic：width: fit-content — 制約の範囲内で、コンテンツに合わせた幅になります。固定レイアウトでは調整のためにブレークポイントが必要ですが、Intrinsic Layoutはコンテンツと周囲の状況に応じて自動的に調整されます。

Intrinsic Designは、コンテンツのサイズが自然に変化する場合に最も効果を発揮します。サイズが既知で均一なコンテンツにIntrinsic Sizingを無理に適用すると、メリットがないまま複雑さが増します。ナビゲーションやツールバーなど、固定されたUIの枠組みには明示的なサイズを使用し、コンテンツ領域にはIntrinsic Sizingを使用します。

grid-template-columnsで、auto-fitはauto-fillとどのように異なる動作をしますか？

Intrinsic Designでは、CSSのサイズ指定キーワード（min-content、max-content、fit-content）、auto-fitと組み合わせたminmax()、流動的な拡縮のためのclamp()、そしてaspect-ratioを使用して、ビューポートのブレークポイントではなくコンテンツの寸法を基準にレイアウトを作成します。その結果、CSSの量とメディアクエリの数を減らしながら、自然にレスポンシブなレイアウトを実現できます。