Flexbox と Grid の組み合わせ

FlexboxとGridは競合するものではなく、連携して使うように設計されています。一般的なパターンは、ページ全体の大まかな構造にCSS Gridを使い、各グリッド領域の内部でコンポーネントの内容を配置するためにFlexboxを使う方法です。

Gridでページ全体の基本構造を定義します。各グリッド領域の内部では、コンポーネント単位の配置にFlexboxを使います。たとえば、ナビゲーションリンクを横一列に並べたり、カードの内容を縦方向に並べたりできます。

典型的なパターンは、カードのレイアウトにGridを使い、各カードの内部レイアウトにFlexを使う方法です。これによりカード同士をグリッド上で揃えながら、内部の要素（画像、タイトル、本文、フッター）を正しく縦に並べられます。

一般的なナビゲーションバーでは、両方を組み合わせます。ナビゲーション自体をFlexコンテナーにして、ロゴとリンクを配置します。リンク部分を別のFlexコンテナーにすることもあります。メガメニューでは、複数列のレイアウトにGridを使う場合があります。

「Holy Grail」レイアウト（ヘッダー、3列の中央部分、フッター）は、現在ではGridで簡単に実現できます。左サイドバー、メイン領域、右サイドバーの3列をGridの列として定義し、それぞれの内部にはFlexboxを使います。

GridとFlexboxはどちらも、コンテンツを完全に中央揃えできます。Gridではplace-items: center（align-itemsとjustify-itemsの短縮記法）を使います。Flexではjustify-content: center; align-items: centerを使います。

モバイルでは1列にして、ナビゲーションを上部に配置します。タブレット以上では、サイドバーとコンテンツを横並びにします。Gridならこの構成を宣言的に定義でき、メディアクエリでtemplate-areasを変更するだけです。

アイコンをテキストの横に配置するのは、非常によくある小さなレイアウトです。1行に並べて整列するため、Flexboxが最適です。

Gridを使う場合：行と列の両方で考えるとき、トラックをまたいでアイテムを揃える必要があるとき、ページの基本構造を作るとき。Flexを使う場合：1方向で考えるとき、アイテムを縮小・拡大させたいとき、ボタンを横一列に並べたりアイテムを縦に積み重ねたりするときです。

複雑なグリッドよりも、max-widthとmargin: autoを設定したシンプルなブロック要素のほうが適している場合があります。すべてのレイアウトにGridが必要なわけではありません。目的を達成できる最もシンプルなツールを使いましょう。

DevToolsでElementsパネルのgrid/flexバッジをクリックすると、グリッド線やFlexアイテムの輪郭を重ねて表示できます。見えないレイアウト構造を可視化できるため、配置のずれの原因を特定するうえで非常に役立ちます。

ページレベルとコンポーネントレベルのレイアウトで、それぞれ最も一般的に使われるレイアウトツールの組み合わせはどれですか？

GridとFlexboxは相補的なツールです。2次元のページ構造にはGridを使います。1次元のコンポーネント内部にはFlexboxを使います。グリッドにplace-items: centerを設定すると、すべてを中央揃えできます。カード本文にflex-direction: columnとflex: 1を設定すると、カードのフッターを下へ押し下げられます。DevToolsのオーバーレイバッジで問題を調査しましょう。