Grid, Flexbox, Tableの特徴と使い所、CSSレイアウトを徹底比較。もう迷わない。

CSSにはさまざまなレイアウト手法がありますが、特に「Grid」「Flexbox」「Table」はよく使われます。それぞれの特徴と適した使い所をまとめました。

1. Gridレイアウト

特徴

• 2次元（縦・横）レイアウトが可能
• 明確な行と列の定義ができる
• 要素の配置を直感的に管理できる

具体例

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 10px;
}
.item {
    background: lightblue;
    padding: 20px;
    text-align: center;
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

使い所

✅ 複雑なレイアウト（ダッシュボード、カード型レイアウト） ✅ 行と列をきれいに整列したい場合 ✅ デザイン全体を柔軟にコントロールしたい場合

2. Flexboxレイアウト

特徴

• 1次元（横または縦）レイアウトに適している
• 要素の並び順を自由に変更可能
• 自動調整がしやすい

具体例

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item {
    background: lightgreen;
    padding: 20px;
    text-align: center;
}

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>

使い所

✅ ナビゲーションバー ✅ ボタンやアイコンの並び ✅ 可変幅の要素をバランスよく配置したい場合

3. Tableレイアウト

特徴

• 表形式のデータ表示に特化
• セルの結合が可能
• 余計なスタイルなしで規則的な表示ができる

具体例

<table>
    <tr>
        <th>商品名</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>商品A</td>
        <td>1000円</td>
    </tr>
    <tr>
        <td>商品B</td>
        <td>2000円</td>
    </tr>
</table>

使い所

✅ データ一覧表 ✅ 価格表やスケジュール表 ✅ 行列の関係が重要な情報

まとめ

レイアウトの目的に合わせて最適な手法を選びましょう！