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

生徒

「CSSグリッドでマス目を作ってみたのですが、指定した数よりも中身の要素が増えてしまった時、どうなるんですか？」

先生

「それはとても大切な視点ですね。CSS Gridには、あらかじめ作る『明示的グリッド』と、はみ出した分を自動で補う『暗黙的グリッド』という二つの仕組みがあるんですよ。」

生徒

「明示的と暗黙的……なんだか難しい言葉ですが、勝手にマス目が増えるということでしょうか？」

先生

「その通りです！自動生成されるマス目のルールを知ると、どんなにデータが増えても崩れないレイアウトが作れるようになります。詳しく見ていきましょう！」

1. CSSグリッドレイアウトの基本とマス目の考え方

Webサイトのデザインを作るとき、画面を縦横の「マス目」で区切って配置する方法をCSSグリッドレイアウト（Grid Layout）と呼びます。エクセルのような表をイメージすると分かりやすいでしょう。

このマス目を作るには、まず親要素（コンテナ）に対して「ここをグリッドにしますよ」と宣言します。すると、その中に入っている子要素たちが、自動的にマス目に沿って整列してくれるようになります。しかし、私たちが「3列2行の表にする」と決めていても、中身のデータが10個あれば、どうしてもマス目から溢れてしまいますよね。この「予定していた枠」と「予定外の枠」をどう扱うかが、今回の重要なテーマです。

2. 明示的グリッドとは？あらかじめ用意した予約席

明示的グリッド（Explicit Grid）とは、私たちがCSSのコードを使って「縦に何本、横に何本の線を引くか」をはっきりと指定して作ったマス目のことです。「ここには3つの箱を並べます」と宣言した、いわば「予約席」のようなものです。

これを作るには、grid-template-columns（列の幅）や grid-template-rows（行の高さ）というプロパティを使います。ここで決めた範囲内が、明示的グリッドとなります。初心者の方は、まず自分がどれくらいの広さの表を作りたいかを定義することから始まります。


<style>
    .explicit-container {
        display: grid;
        /* 横に100pxの幅を2つ作る（明示的グリッド） */
        grid-template-columns: 100px 100px;
        /* 縦に50pxの高さを1つ作る（明示的グリッド） */
        grid-template-rows: 50px;
        gap: 10px;
        background-color: #f0f0f0;
        padding: 10px;
    }
    .item {
        background-color: #007bff;
        color: white;
        padding: 10px;
        text-align: center;
    }
</style>

<div class="explicit-container">
    <div class="item">1</div>
    <div class="item">2</div>
</div>

ブラウザ表示

3. 暗黙的グリッドとは？はみ出した時に現れる補助席

予定していた「予約席（明示的グリッド）」以上の要素が追加されたとき、ブラウザは気を利かせて新しいマス目を勝手に追加してくれます。これを暗黙的グリッド（Implicit Grid）と呼びます。名前は難しいですが、「自動で追加された予備の席」だと考えてください。

例えば、2つしかマス目を用意していないのに3つ目の要素が来ると、グリッドシステムは「おっと、場所が足りないな」と判断し、新しい行や列を自動で生成します。このとき、特に指示をしないと、新しくできたマス目の大きさは中身に合わせて最小限の高さになってしまいます。

4. 暗黙的グリッドが自動生成される様子を確認しよう

実際に、明示的に指定した数よりも多くの要素を並べてみましょう。コードで指定していない「2行目」がどのように現れるかに注目してください。


<style>
    .implicit-container {
        display: grid;
        /* 横2列は決めているが、行の高さは1行目しか決めていない */
        grid-template-columns: 100px 100px;
        grid-template-rows: 50px; 
        gap: 10px;
        background-color: #e9ecef;
    }
    .item-auto {
        background-color: #28a745;
        color: white;
        text-align: center;
        line-height: 30px;
    }
</style>

<div class="implicit-container">
    <div class="item-auto">明示的1</div>
    <div class="item-auto">明示的2</div>
    <div class="item-auto">暗黙的3</div>
    <div class="item-auto">暗黙的4</div>
</div>

ブラウザ表示

上の例では、「暗黙的3」「暗黙的4」が入っている2行目は、grid-template-rows で指定していないのに自動で作られました。これが暗黙的グリッドの力です。

5. 自動生成されるマス目のサイズをコントロールする

自動で増える「暗黙的グリッド」の高さや幅がバラバラだと、デザインが格好悪くなってしまいますよね。そこで使うのが grid-auto-rows や grid-auto-columns というプロパティです。

これらを使うと、「もし予定外にマス目が増えたら、そのサイズはこの大きさにしてくださいね」と予約しておくことができます。これにより、データがどれだけ増えても、整然としたレイアウトを保つことが可能になります。パソコンの画面サイズやコンテンツの量に合わせて柔軟に変化するサイトを作るための必須テクニックです。


<style>
    .auto-rows-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 60px; /* 1行目だけ指定 */
        /* 自動で増える行（2行目以降）の高さをすべて80pxにする */
        grid-auto-rows: 80px;
        gap: 10px;
    }
    .item-styled {
        background-color: #ffc107;
        border: 1px solid #333;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<div class="auto-rows-container">
    <div class="item-styled">1行目</div>
    <div class="item-styled">1行目</div>
    <div class="item-styled">自動2行目</div>
    <div class="item-styled">自動2行目</div>
</div>

ブラウザ表示

6. 自動で流れる方向を決めるgrid-auto-flow

はみ出した要素が「下（行）」に増えるのか、それとも「右（列）」に増えるのかを決める設定が grid-auto-flow です。初期設定では「row（行）」になっており、下へ下へと増えていきます。これを「column（列）」に変えると、横に突き抜けるようにマス目が増えていきます。

これを理解すると、ニュース記事のように縦に並べたいものや、横スクロールのギャラリーのように横に並べたいものなど、情報の見せ方を自由自在に操れるようになります。まさにグリッドの「交通整理」のような役割です。

7. 明示的と暗黙的を使い分けるコツと実践

「全部 grid-template で指定すればいいのでは？」と思うかもしれません。しかし、実際のWebサイトでは、ブログの記事一覧や商品リストのように「いくつ項目が並ぶか事前には分からない」場合がほとんどです。

そんな時は、「横に何個並べるか」だけを明示的グリッドで決め、縦に増えていく分は暗黙的グリッドに任せる、という使い分けをします。こうすることで、記事が1つでも100個でも、コードを書き換えることなくきれいに表示される「スマートな設計」ができるようになります。


<style>
    .practical-grid {
        display: grid;
        /* 横3列は絶対（明示的） */
        grid-template-columns: repeat(3, 1fr);
        /* 行は中身におまかせ（暗黙的）、かつ最小高さを確保 */
        grid-auto-rows: minmax(100px, auto);
        gap: 15px;
    }
    .card {
        background-color: #fff;
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }
</style>

<div class="practical-grid">
    <div class="card">商品A</div>
    <div class="card">商品B</div>
    <div class="card">商品C</div>
    <div class="card">商品D（自動で2行目へ）</div>
</div>

ブラウザ表示

8. エラーのないレイアウトを作るための最終チェック

CSSグリッドを触り始めたばかりの頃は、「思った通りのサイズにならない」「変な隙間ができる」といったトラブルがよく起こります。そんな時は、ブラウザの「開発者ツール」という機能を使って、引かれているグリッドの線を視覚的に確認してみましょう。

自分が引いた線（明示的）なのか、ブラウザが勝手に引いた線（暗黙的）なのかを見分けることができれば、レイアウトの修正はぐっと簡単になります。今回学んだ「予約席」と「補助席」の違いを意識して、ぜひ自分だけの自由なレイアウトに挑戦してみてください。プログラミングは、こうした小さな仕組みの理解の積み重ねで、どんどん楽しくなっていきますよ！