CSSグリッドとFlexboxの使い方を徹底解説！レイアウト構築ガイド
Web制作において、美しく機能的なレイアウトはユーザー体験を大きく左右します。CSSでは主に Flexbox（フレックスボックス） と Grid（グリッド） の2つの強力なレイアウト技術が用いられています。
本記事では、それぞれの使い方や違い、実際のレイアウト構築例を交えながら解説します。これからCSSレイアウトを学びたい方、FlexとGridの使い分けに迷っている方は必見です！
Contents
1. Flexboxとは？
Flexboxは一方向（縦または横）のレイアウトに適しています。要素を並べる・揃える・伸ばすといった操作が簡単にでき、レスポンシブデザインにも強いのが特長です。
💡 中央揃えの具体例は、以下の記事でも詳しく解説しています：
👉 CSSで中央揃えする方法まとめ（Flexbox・Grid・transform別）
基本構文
.container {
display: flex;
justify-content: space-between;
align-items: center;
}主なプロパティ
| プロパティ | 意味 |
|---|---|
flex-direction | 子要素の並ぶ方向（row / column） |
justify-content | 主軸方向の配置（左寄せ・中央・等間隔など） |
align-items | 交差軸方向の揃え方 |
flex-wrap | 折り返しの指定 |
2. Gridとは？
Gridは、縦横の2軸で構成されるレイアウトに向いています。表のようなレイアウトをCSSだけで自在に組めるため、複雑な構造にも柔軟に対応可能です。
👉 よく使うレイアウト構造は以下でまとめています：
👉 HTMLとCSSでよく使うレイアウトパターン10選
基本構文
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 16px;
}主なプロパティ
| プロパティ | 意味 |
|---|---|
grid-template-columns | 列幅の指定 |
grid-template-rows | 行高の指定 |
grid-gap / gap | 行や列の間隔 |
grid-column / grid-row | 子要素の配置範囲 |
3. FlexboxとGridの使い分け
| 用途 | Flexbox | Grid |
|---|---|---|
| メニューやボタンなどの一列配置 | ◎ | △ |
| 複数列・複雑なレイアウト | △ | ◎ |
| レスポンシブ対応 | ◎ | ◎ |
| コードの直感的な管理 | △ | ◎（特に明示的な行・列構成時） |
🔰 初心者の方はまずこちらの記事から：
👉 初心者のためのCSS入門ガイド【2025年最新版】
💡 基本的なルール
- 一方向の並び → Flexbox
- 複数列・エリア分割 → Grid
4. 実践！Flexboxでカードレイアウトを作る
HTML
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>CSS
.card-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.card {
background: #f4f4f4;
padding: 20px;
flex: 1 1 calc(33.333% - 20px);
}5. 実践！Gridで2カラムレイアウトを作る
HTML
<div class="grid-container">
<aside>サイドバー</aside>
<main>メインコンテンツ</main>
</div>CSS
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 20px;
}レスポンシブにするなら、メディアクエリを併用します：
CSS
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}📱 メディアクエリの基本はこちらで解説しています：
👉 レスポンシブWebデザインの基本と実装方法【メディアクエリ入門】
6. まとめ
- Flexboxは一方向の整列に最適。簡単に「並べる」ことができる。
- Gridは2次元レイアウトに強い。複雑な配置も柔軟に管理可能。
- 両者は競合ではなく、目的に応じて使い分けることが大切です。
おまけ：WordPressで使う場合
WordPressのテーマやウィジェットエリアでも、<div>要素にクラスを付けてこのようなレイアウトを適用できます。カスタムブロックやテーマ編集でのデザインの幅が広がります！