Bootstrapカードグリッド間隔を完全理解！g-*・gx/gy・margin/padding併用ガイド

カードグリッドの間隔最適化：g-*・gx/gy と m-*/p-* の併用ガイド

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

生徒

「Bootstrapでカードを並べたら、間がギュウギュウだったり空きすぎたりします…」

先生

「それはグリッドの間隔と余白の指定を正しく使えていない可能性があります。」

生徒

「g-*とかm-*とかp-*がたくさんあって混乱します…」

先生

「大丈夫です。役割を分けて考えると、とてもシンプルですよ。」

1. Bootstrapのカードグリッドと間隔調整の考え方

Bootstrapでは、カードを横に並べるときにグリッドシステムを使います。グリッドとは、画面をマス目のように分けて配置する仕組みです。カード同士の間隔は、机の上に本を並べるときの「すき間」と同じイメージで考えると分かりやすくなります。

この「すき間」を調整する方法が、g-*、gx/gy、そしてmarginやpaddingのユーティリティです。それぞれ役割が違うので、正しく使い分けることが大切です。

2. g-*とは何か？グリッド全体のすき間を決める

g-*は、行と列のすき間をまとめて指定するためのクラスです。数字が大きいほど、カード同士の間が広くなります。たとえば、g-3は「標準より少し広めのすき間」を意味します。


<div class="row g-3">
    <div class="col-4">
        <div class="card p-3">カードA</div>
    </div>
    <div class="col-4">
        <div class="card p-3">カードB</div>
    </div>
    <div class="col-4">
        <div class="card p-3">カードC</div>
    </div>
</div>

ブラウザ表示

3. gxとgyで横と縦の間隔を分けて考える

gxは横方向、gyは縦方向のすき間を指定します。これは、本棚で横の間隔と段の高さを別々に調整する感覚に近いです。縦だけ広くしたい、横だけ詰めたい、というときに便利です。


<div class="row gx-2 gy-4">
    <div class="col-6">
        <div class="card p-3">上のカード</div>
    </div>
    <div class="col-6">
        <div class="card p-3">上のカード</div>
    </div>
    <div class="col-6">
        <div class="card p-3">下のカード</div>
    </div>
    <div class="col-6">
        <div class="card p-3">下のカード</div>
    </div>
</div>

ブラウザ表示

4. marginとpaddingの違いをやさしく理解する

marginは「外側の余白」、paddingは「内側の余白」です。段ボール箱で例えると、箱と箱の距離がmargin、箱の中のクッションがpaddingです。カードの中身を見やすくするにはpadding、カード同士を離すにはmarginを使います。

5. カード単体にm-やp-を使う基本例

5. カード単体にm-*やp-*を使う基本例

グリッドの間隔とは別に、カードだけ少し離したい場合もあります。そのときはm-*やp-*を使います。これは個別調整なので、全体ではなく一部だけ変えたいときに向いています。


<div class="card m-3 p-4">
    <img src="/img/sample150-100.jpg" class="mb-2">
    <p>余白をしっかり取ったカード</p>
</div>

ブラウザ表示

6. g-とm-を一緒に使うときの考え方

6. g-*とm-*を一緒に使うときの考え方

基本はg-*で全体の間隔を決め、どうしても足りない部分だけをm-*で補います。最初から両方を多用すると、間隔が分かりにくくなります。料理で言えば、最初に全体の味を決めて、最後に少しだけ調味料を足す感覚です。

7. よくある失敗例とその直し方

初心者がよくやってしまうのは、rowにm-*を付けてしまうことです。これにより、画面端がずれて見えることがあります。基本はrowにはg-*、colやcardにm-*を使うと覚えると失敗しにくくなります。

8. スマホ表示でもきれいに見せる間隔調整

Bootstrapでは画面サイズごとに間隔を変えられます。スマホでは縦に並ぶため、gyを少し大きめにすると読みやすくなります。小さい画面ほど「ゆったり」を意識すると、見やすいデザインになります。


<div class="row gx-2 gy-3 gy-md-1">
    <div class="col-12 col-md-4">
        <div class="card p-3">レスポンシブカード</div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card p-3">レスポンシブカード</div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card p-3">レスポンシブカード</div>
    </div>
</div>

ブラウザ表示

2026年最新スキルアップ・実践セミナー