Bootstrap5グリッドとは？12分割の基本とrow・col・gutterを初心者向けにやさしく解説

Bootstrap 5グリッドとは？12分割の基本と用語（row・col・gutter）をやさしく解説

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

生徒

「Bootstrapのグリッドって聞いたことはあるんですが、12分割って何のことですか？」

先生

「画面を12個の同じ幅の箱に分けて考える仕組みのことですよ。」

生徒

「箱で考えるんですね。でも、rowとかcolとか、言葉が多くて混乱します。」

先生

「大丈夫です。今日は言葉の意味から順番に説明します。」

1. Bootstrap5のグリッドシステムとは何か

Bootstrap5のグリッドシステムとは、画面をきれいに整理して並べるための仕組みです。難しく聞こえますが、実際は「画面を区切って配置するルール」です。

ノートに線を引いて、文字を書く場所を決めるイメージをすると分かりやすいです。グリッドは、その線の役割をします。

2. なぜ12分割なのかをやさしく理解する

Bootstrapでは、横幅を12個に分けて考えます。12という数字は、割り算しやすいからです。

12は、2でも3でも4でも6でも割れます。そのため、半分、三分の一、四分の一など、いろいろなレイアウトを簡単に作れます。

3. rowとは何かを理解しよう

rowは「横一列のまとまり」を表します。行と考えると分かりやすいです。

Bootstrapでは、必ずrowの中にcolを入れます。rowは箱を横に並べるための土台です。


<div class="container">
    <div class="row">
        <div>中身</div>
    </div>
</div>

ブラウザ表示

4. colとは何かを理解しよう

colは「列」を意味します。rowの中に置く箱のことです。

この箱に内容を書いていくことで、横並びのレイアウトが完成します。colは自動的に幅を調整してくれます。


<div class="container">
    <div class="row">
        <div class="col">左</div>
        <div class="col">右</div>
    </div>
</div>

ブラウザ表示

5. 数字付きcolで幅を指定する考え方

colに数字を付けると、12分割のうち何個分使うかを指定できます。

例えば、6と6にすると半分ずつ、4と8にすると三分の一と三分の二になります。


<div class="container">
    <div class="row">
        <div class="col-4">左</div>
        <div class="col-8">右</div>
    </div>
</div>

ブラウザ表示

6. gutterとは何かをやさしく説明

gutterとは、列と列の間のすき間のことです。人が並ぶときの間隔のようなものです。

このすき間があることで、見た目が読みやすくなります。


<div class="container">
    <div class="row g-4">
        <div class="col bg-light">左</div>
        <div class="col bg-secondary">右</div>
    </div>
</div>

ブラウザ表示

7. gutterをなくしたり増やしたりする理由

場合によっては、すき間をなくしたいこともあります。写真をぴったり並べたいときなどです。

逆に、情報を強調したいときは、すき間を広くすることで見やすくできます。


<div class="container">
    <div class="row g-0">
        <div class="col bg-light">左</div>
        <div class="col bg-secondary">右</div>
    </div>
</div>

ブラウザ表示