CSSでレイアウトを組むときに、必ず耳にするのが「Flexbox」と「Grid」。
どちらも便利なレイアウト手法ですが、「何が違うの？」「どっちを使えばいいの？」と悩む方も多いのではないでしょうか？

この記事では、初心者の方にもわかりやすく、FlexとGridの違いを解説します！

FlexとGridのざっくり違い

Flexboxの特徴

Flexboxは「一方向」の並びに強いレイアウト方法です。

例えば、

• ヘッダーのメニュー
• ボタンを横に並べたい
• 縦にカードを整列させたい

といったシンプルな並びに最適です。

display: flex;
justify-content: center;
align-items: center;

たったこれだけで、中央揃えも簡単！

Gridの特徴

Gridは、2次元のグリッド（格子状）で考えるレイアウト。

• サイトのメインコンテンツとサイドバー
• ギャラリー風の画像一覧
• 雑誌のような複雑なデザイン

こんな複雑なレイアウトも、Gridならスッキリ管理できます。

display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto;
gap: 20px;

結局どっちを使うべき？

• 単純な並び → Flex
• 複雑な構成 → Grid

が基本です。
ただ、組み合わせて使うのもよくあるパターン。
例えば、ページ全体はGridで組んで、ヘッダー部分だけFlexにする、みたいな使い方ですね。

まとめ

FlexとGridは、どちらも超便利！
特徴を理解して使い分ければ、レイアウトは思いのままです。
これを機に、ぜひ挑戦してみてください！