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

生徒

「グリッドレイアウトを使うと、画面の大きさに合わせて自動で列の数が変わるようにできるって本当ですか？」

先生

「はい、本当ですよ。CSSグリッドの特別な機能を使えば、メディアクエリを細かく書かなくても自動で調整してくれます。」

生徒

「自動で！？それは便利そうですね。でも計算とか難しくないですか？」

先生

「難しい計算はブラウザにお任せできます。基本的な書き方さえ覚えれば、パソコンでもスマホでも綺麗に並ぶレイアウトが作れますよ！」

1. グリッドレイアウトで可変カラムを作る魅力とは？

Webサイトのデザインにおいて「カラム」とは「列」のことを指します。パソコンの大きな画面では3列や4列に並べて表示したいけれど、スマホの小さな画面では1列に並べたい、ということがあります。これを実現するのが「可変カラム」という考え方です。

従来のやり方では、画面サイズごとに「今は3列」「今は1列」と手動で細かく指示を出す必要がありました。しかし、CSSグリッド（CSS Grid Layout）の最新の機能を使えば、「箱の最小サイズはこれくらいにして、あとは画面に合わせて入るだけ並べてね！」という魔法のような指示が可能になります。これにより、どんな中途半端な画面サイズの端末で見ても、常に最適なレイアウトが保たれるようになります。

2. グリッドレイアウトの基本！親要素と子要素のルール

グリッドレイアウトを使うには、まず「親要素（外側の箱）」と「子要素（中身のパーツ）」の関係を理解する必要があります。親要素に対して「今からここを網目状のレイアウトにするよ」と宣言（display: grid）することで、中に入っている子要素たちが自動的に整列し始めます。

プログラミング未経験の方にとって、グリッドは「エクセルの表」や「将棋の盤面」をイメージすると分かりやすいでしょう。縦の線と横の線が組み合わさったマス目を作り、そこにパーツを配置していくイメージです。可変カラムを作る場合は、この「縦の線の数」を固定せず、ブラウザに自動で判断させるのがポイントです。


<style>
    .grid-base {
        display: grid; /* グリッドを有効にする */
        grid-template-columns: 1fr 1fr; /* 2列に並べるという意味 */
        gap: 10px; /* パーツ同士の隙間 */
        background-color: #f8f9fa;
        padding: 10px;
    }
    .grid-item {
        background-color: #007bff;
        color: white;
        padding: 20px;
        text-align: center;
        border-radius: 5px;
    }
</style>

<div class="grid-base">
    <div class="grid-item">パーツ 1</div>
    <div class="grid-item">パーツ 2</div>
    <div class="grid-item">パーツ 3</div>
    <div class="grid-item">パーツ 4</div>
</div>

ブラウザ表示

3. 自動で列を増減させるrepeatとauto-fitの魔法

可変カラムを実現するための重要な呪文が「repeat()」と「auto-fit（オート・フィット）」です。repeatはその名の通り「繰り返し」という意味で、同じような幅の列をいくつも作りたいときに使います。そして、列の数のところに「auto-fit」と書くことで、「画面に入る分だけ自動で列を詰め込んでね」という指示になります。

これを使えば、画面が広いときは横に4つ、画面が狭くなると3つ、2つ、そして最後には1つ……といった具合に、列の数が自動で変化します。パソコン向けやスマホ向けと個別に設定を書く手間が省けるため、効率的にレスポンシブ対応を行うことができます。まさに、初心者こそ覚えるべき時短テクニックと言えるでしょう。

4. minmax関数で「最小の幅」を保証する

「auto-fit」と一緒に必ず使うのが「minmax()（ミンマックス）」という関数です。これは「最小値」と「最大値」をセットで決めるための命令です。可変カラムでは「最小でもこの幅は守ってほしい、でも余ったスペースがあれば最大まで広がっていいよ」という指定をします。

例えば「minmax(200px, 1fr)」と書くと、「どんなに画面が狭くなっても200pxよりは小さくならないで、画面が広いときは余った分をみんなで等分（1fr）してね」という意味になります。これによって、パーツが小さくなりすぎて中身が見えなくなるのを防ぎつつ、大きな画面では寂しくならないように広がってくれる、理想的な可変レイアウトが完成します。


<style>
    .grid-auto {
        display: grid;
        /* 自動で折り返し、最小幅200pxを保ちつつ等分する魔法の書き方 */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }
    .card-item {
        background-color: #28a745;
        color: white;
        padding: 30px;
        text-align: center;
        border: 2px solid #1e7e34;
    }
</style>

<div class="grid-auto">
    <div class="card-item">商品 A</div>
    <div class="card-item">商品 B</div>
    <div class="card-item">商品 C</div>
    <div class="card-item">商品 D</div>
</div>

ブラウザ表示

5. auto-fillとauto-fitの違いを理解して使い分ける

グリッドには「auto-fit」の他にも「auto-fill（オート・フィル）」という似たような言葉があります。どちらも自動で列を作ってくれますが、パーツの数が少ないときの動きが少し違います。「auto-fit」はパーツが少ないときに残りの隙間を埋めるようにパーツが広がりますが、「auto-fill」はパーツが少なくても隙間をそのまま残します。

基本的には「auto-fit」の方が、余計な空白ができずにデザインがまとまりやすいため、初心者の方にはこちらをおすすめします。ただし、パーツが1つしかないときに画面いっぱいに広がってほしくないような場合は「auto-fill」を使うこともあります。まずは実際にどちらも試してみて、自分の理想の動きに近い方を選んでみましょう。

6. 隙間を自由に操るgapプロパティの使い方

レイアウトを整える上で欠かせないのが、パーツ同士の「隙間」です。昔のやり方ではマージンなどの計算が大変でしたが、グリッドレイアウトでは「gap（ギャップ）」というプロパティ一つで全ての隙間を管理できます。縦の隙間と横の隙間を一括で設定できるため、初心者の方でも直感的にデザインを調整できます。

隙間があることで、情報が整理されて読みやすくなります。特にスマホで見たときは、パーツ同士がくっついていると誤操作の原因にもなるため、適切なgapを設定することが重要です。数値を「10px」や「20px」と変えるだけで、サイト全体の雰囲気がガラッと変わる楽しさをぜひ体験してください。


<style>
    .grid-gap-sample {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 30px; /* 縦横30pxの広い隙間を作る */
    }
    .gap-item {
        background-color: #ffc107;
        color: #333;
        padding: 15px;
        text-align: center;
        font-weight: bold;
    }
</style>

<div class="grid-gap-sample">
    <div class="gap-item">隙間たっぷり 1</div>
    <div class="gap-item">隙間たっぷり 2</div>
    <div class="gap-item">隙間たっぷり 3</div>
</div>

ブラウザ表示

7. 画像ギャラリーをレスポンシブにする実践テクニック

可変カラムの機能が最も威力を発揮するのは「写真一覧（ギャラリー）」のページです。正方形の写真をタイル状に並べる際、パソコンでは5枚、スマホでは2枚といった表示を自動で行いたいですよね。このときも、repeatとminmaxの組み合わせが大活躍します。

画像自体の幅を「width: 100%」にしておけば、グリッドのマス目の大きさに合わせて写真も自動的に伸び縮みします。さらに、高さも揃えたい場合は以前に習ったテクニックを組み合わせることで、非常に美しく、洗練されたポートフォリオサイトや商品一覧ページを簡単に作成することができます。以下のコードで、画像がどのように並ぶか確認してみましょう。


<style>
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }
    .gallery-grid img {
        width: 100%; /* マス目いっぱいに広げる */
        height: auto;
        border: 1px solid #ddd;
    }
</style>

<div class="gallery-grid">
    <img src="/img/sample120-120.jpg" alt="見本 1">
    <img src="/img/sample120-120.jpg" alt="見本 2">
    <img src="/img/sample120-120.jpg" alt="見本 3">
    <img src="/img/sample120-120.jpg" alt="見本 4">
    <img src="/img/sample120-120.jpg" alt="見本 5">
</div>

ブラウザ表示

8. ブラウザの検証ツールでグリッドを可視化しよう

「今、グリッドがどういう網目になっているのか」を視覚的に確認する方法があります。それは、ブラウザ（Google Chromeなど）の「検証ツール」を使うことです。右クリックして「検証」を開き、HTMLタグの「grid」という小さなバッジをクリックすると、画面上にグリッドの線が表示されます。

この機能を使えば、自分の書いた「minmax」や「gap」がどのように反映されているかが一目瞭然です。プロのエンジニアも、この画面を見ながらミリ単位の調整を行っています。パソコン初心者の方も、このツールを使いこなすことで、CSSがどのように動いているのかという仕組みをより深く、楽しく理解できるようになるでしょう。