Bootstrapグリッドのガター完全ガイド！g-0〜g-5・gx・gyで間隔を自由に調整しよう

ガター（g-0～g-5）/gx/gyで行・列の間隔を自在に調整する方法

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

生徒

「Bootstrapのグリッドで、要素と要素の間が広すぎたり狭すぎたりするんですが、調整できますか？」

先生

「Bootstrapではガターという仕組みを使って、行や列の間隔を簡単に変えられます。」

生徒

「ガターって何ですか？難しそうです……」

先生

「大丈夫です。机を並べたときの“すき間”のようなものだと思ってください。これから順番に見ていきましょう。」

1. Bootstrapのガターとは何か？

Bootstrapのグリッドシステムでは、画面を12個に分けてレイアウトを作ります。そのとき、列と列のあいだには自動的に少しすき間があきます。このすき間のことをガターと呼びます。

ガターは、文章でいう行間や、ノートに書くときの余白のような存在です。これがあることで、画面がぎゅうぎゅうにならず、見やすいデザインになります。

Bootstrap5では、このガターをクラス指定だけで簡単に調整できます。難しい計算や設定は不要なので、初心者でも安心して使えます。

2. g-0〜g-5で全体の間隔を調整する

もっとも基本的なガター調整が、g-0からg-5までの指定です。これは、行と列の両方の間隔をまとめて変更します。

数字が大きくなるほど、すき間が広くなります。g-0はすき間なし、g-5はかなりゆったりした間隔になります。


<div class="container">
    <div class="row g-3">
        <div class="col-4 bg-primary text-white">左</div>
        <div class="col-4 bg-secondary text-white">中央</div>
        <div class="col-4 bg-success text-white">右</div>
    </div>
</div>

ブラウザ表示

この例ではg-3を指定しています。3人掛けの椅子を少し間をあけて並べたようなイメージです。

3. g-0を使ってすき間を完全になくす方法

画像をぴったり並べたいときや、表のように見せたいときは、ガターが邪魔になることがあります。その場合はg-0を使います。


<div class="container">
    <div class="row g-0">
        <div class="col-6">
            <img src="/img/sample150-100.jpg" class="img-fluid">
        </div>
        <div class="col-6">
            <img src="/img/sample150-100.jpg" class="img-fluid">
        </div>
    </div>
</div>

ブラウザ表示

ガターが0になることで、画像同士がピタッとくっつきます。写真アルバムのような表示に向いています。

4. gxで横方向の間隔だけを変える

ガターは、横方向と縦方向を別々に調整することもできます。横方向だけを変えたいときに使うのがgxです。

gxは列と列の間、つまり左右のすき間だけに影響します。上下の間隔は変わりません。


<div class="container">
    <div class="row gx-5">
        <div class="col-4 bg-warning">A</div>
        <div class="col-4 bg-info">B</div>
        <div class="col-4 bg-warning">C</div>
    </div>
</div>

ブラウザ表示

横だけ広くしたいときは、机の横の間隔だけを空けるイメージをすると理解しやすいです。

5. gyで縦方向の間隔だけを変える

反対に、上下のすき間だけを調整したい場合はgyを使います。これは行と行の間隔に影響します。


<div class="container">
    <div class="row gy-4">
        <div class="col-12 bg-light">上の行</div>
        <div class="col-12 bg-light">下の行</div>
    </div>
</div>

ブラウザ表示

gyを使うと、文章ブロック同士の間を読みやすく調整できます。ブログや説明ページでよく使われます。

6. gxとgyを組み合わせて使う

Bootstrapの便利なところは、gxとgyを同時に使える点です。横と縦を別々の広さに設定できます。


<div class="container">
    <div class="row gx-2 gy-5">
        <div class="col-6 bg-success text-white">左上</div>
        <div class="col-6 bg-success text-white">右上</div>
        <div class="col-6 bg-success text-white">左下</div>
        <div class="col-6 bg-success text-white">右下</div>
    </div>
</div>

ブラウザ表示

横はコンパクト、縦はゆったりといったレイアウトも、クラス指定だけで実現できます。