先生と生徒の会話形式で理解しよう

生徒

「CSSグリッドで大きな枠組みを作ったのですが、そのマス目の中にさらに細かいマス目を作って複雑なデザインにすることはできますか？」

先生

「もちろん可能です！グリッドの中にさらにグリッドを作ることを『nested grid（入れ子グリッド）』と呼びます。」

生徒

「入れ子……箱の中にさらに小さな箱を入れるようなイメージですね。難しくないですか？」

先生

「基本的な考え方は外側のグリッドと同じですよ。ただ、いくつか気をつけるポイントがあるので、今日はその使い方を丁寧に解説しますね！」

1. nested grid（入れ子グリッド）とは？構成の仕組みを解説

Webデザインの世界でnested grid（ネステッド・グリッド）とは、CSS Gridで作成した「親要素」のマス目（子要素）を、さらに「親」として扱い、その中に新しいグリッドを作成することを指します。「入れ子」や「マトリョーシカ」のような構造をイメージすると分かりやすいでしょう。

例えば、Webサイト全体の大きなレイアウト（ヘッダー、メイン、サイドバー）をグリッドで作り、その中の「メイン」のエリアの中に、さらに商品画像を3枚並べるためのグリッドを作るといった使い方が一般的です。これを使うことで、複雑なレイアウトも整理整頓して組み立てることができるようになります。プログラミング未経験の方でも、大きな箱の中に仕切り付きの小さな箱を入れる作業だと考えれば、決して難しくありません。

2. 基本的な入れ子グリッドの作り方

入れ子グリッドを作る手順は非常にシンプルです。まず、外側のグリッド（親）を作り、その中の特定の要素に対して display: grid; を設定するだけです。これで、その要素自体が新しいグリッドの土台（コンテナ）に早変わりします。

重要なのは、外側のグリッド設定は内側のグリッドには直接影響しないという点です。内側は内側で、新しく列の数や幅を自由に決めることができます。まずは、大きな2分割の枠の中に、さらに3つの小さな箱を並べる例を見てみましょう。


<style>
    /* 外側のグリッド */
    .outer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        background-color: #f0f0f0;
        padding: 20px;
    }
    /* 内側のグリッド（入れ子） */
    .inner-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        background-color: #d1e7ff;
        padding: 10px;
    }
    .box {
        background-color: #007bff;
        color: white;
        text-align: center;
        padding: 10px;
    }
</style>

<div class="outer-grid">
    <div class="box">外側の左側</div>
    <div class="inner-grid">
        <div class="box">内1</div>
        <div class="box">内2</div>
        <div class="box">内3</div>
    </div>
</div>

ブラウザ表示

3. なぜ入れ子にするのか？そのメリットを理解しよう

わざわざグリッドを二重にする理由は、デザインの独立性を保つためです。Webサイトを作っていると、「全体の枠組みは崩したくないけれど、特定の場所だけ細かくパーツを並べたい」という場面が必ず出てきます。このとき、一つの巨大なグリッドですべてを管理しようとすると、マスの数が膨大になりすぎて修正が非常に大変になります。

入れ子構造にすることで、外側のレイアウト担当と、内側のパーツ配置担当を分けて考えることができます。これにより、例えばスマホで見るときに外側の並び方だけを変えて、内側のパーツ配置はそのままにするといった柔軟な対応が簡単になります。これは、複雑な情報を整理して伝えるためのWebデザインの基礎知識です。

4. 実践的なカードレイアウトへの活用方法

もっともよく使われる例は、記事の一覧（カードレイアウト）です。全体の並びをグリッドで作り、各カードの中身（画像、タイトル、日付）をさらに入れ子グリッドで整列させます。こうすることで、画像とテキストの位置をミリ単位できれいに揃えることができます。


<style>
    .card-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .card-item {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 15px;
        border: 1px solid #ccc;
        padding: 10px;
    }
    .card-img {
        width: 100%;
        height: 70px;
        object-fit: cover;
    }
    .card-info {
        font-size: 14px;
    }
</style>

<div class="card-list">
    <div class="card-item">
        <img src="/img/sample120-120.jpg" class="card-img" alt="画像">
        <div class="card-info">
            <strong>記事のタイトル1</strong><br>
            2026年1月12日
        </div>
    </div>
    <div class="card-item">
        <img src="/img/sample120-120.jpg" class="card-img" alt="画像">
        <div class="card-info">
            <strong>記事のタイトル2</strong><br>
            2026年1月13日
        </div>
    </div>
</div>

ブラウザ表示

5. 入れ子グリッドを使用する際の注意点

とても便利な入れ子グリッドですが、注意すべき点もあります。それは、「内側のグリッドは、外側のグリッドの線の位置を知らない」という性質です。これを独立していると言えば聞こえはいいですが、複数の入れ子グリッド同士で、中身の項目の高さをピッタリ揃えたいときは工夫が必要になります。

例えば、左のカードと右のカードで、タイトルの文字数が違うために高さがズレてしまうことがあります。以前はこの問題を解決するために複雑な計算が必要でしたが、最近では「subgrid（サブグリッド）」というさらに高度な機能も登場しています（※ただし、基本を学ぶ段階では、まずは入れ子で独立して制御することに慣れましょう）。また、入れ子にしすぎるとコードが複雑になり、自分でもどこを触っているか分からなくなるため、2段階程度にとどめるのが美しく保つコツです。

6. gap（隙間）の継承に気をつけよう

初心者の方がよく驚くのが、外側のグリッドで設定した gap（余白）が、自動的に内側のグリッドに引き継がれるわけではないということです。内側のグリッドでも余白が必要な場合は、改めて gap を指定する必要があります。

「外側の箱の間隔は広く、内側のパーツ同士の間隔は狭く」といった調整が一般的です。この感覚を掴むと、Webサイトにメリハリが生まれ、格段に読みやすくなります。デザインの基本は余白のコントロールにあると言っても過言ではありません。

7. 画像と文字をきれいに並べるためのヒント

画像を含む入れ子グリッドを作る際は、 object-fit: cover; というプロパティを画像に設定するのがおすすめです。これにより、グリッドのサイズが多少変わっても、画像が縦横に伸びたり縮んだりせず、枠に合わせてきれいに切り抜かれます。特に、入れ子構造にすると親要素のサイズ変更の影響を受けやすいため、この設定をしておくとデザインが崩れにくくなります。


<style>
    .nested-photo-grid {
        display: grid;
        grid-template-columns: 150px 1fr;
        background: #fff;
        border: 2px solid #555;
        overflow: hidden;
    }
    .photo-area {
        height: 100px;
    }
    .photo-area img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .desc-area {
        display: grid;
        padding: 10px;
        align-items: center; /* 垂直中央 */
    }
</style>

<div class="nested-photo-grid">
    <div class="photo-area">
        <img src="/img/sample150-100.jpg" alt="サンプル">
    </div>
    <div class="desc-area">
        <p style="margin:0;">画像とこの文章は、入れ子グリッドで横に並んでいます。</p>
    </div>
</div>

ブラウザ表示