Bootstrapのグリッドの違いと移行を完全解説！初心者でもわかる.col-*・gutter・gapの扱い

1. Bootstrapのグリッドシステムとは？

1. Bootstrapのグリッドシステムとは？

Bootstrapのグリッドシステムとは、Webページを見やすく分割するための仕組みです。ページを「12分割」にして、その中に要素を配置するルールを決めることで、パソコンやスマートフォンなど画面サイズに合わせてレイアウトを自動調整してくれます。

例えば、新聞を縦に区切って記事を配置するイメージです。Bootstrapを使えば、この「区切り」を簡単に指定できます。

2. .col-*の仕様の違い

2. .col-*の仕様の違い

Bootstrap4では、スマホ用・タブレット用・パソコン用といった形で.col-sm-*、.col-md-*、.col-lg-*を使い分けていました。Bootstrap5では基本的な仕組みは同じですが、よりシンプルになり、.colを指定するだけでも自動的に幅を調整してくれます。

<!-- Bootstrap4の例 -->
<div class="row">
  <div class="col-sm-6">左</div>
  <div class="col-sm-6">右</div>
</div>

<!-- Bootstrap5の例 -->
<div class="row">
  <div class="col">左</div>
  <div class="col">右</div>
</div>

このように、Bootstrap5では自動調整が強化され、初心者でも直感的にレイアウトを作れるようになりました。

3. gutterの扱いの違い

3. gutterの扱いの違い

gutter（ガター）とは、カラム（列）とカラムの間にできる余白のことです。Bootstrap4までは、行（row）にマイナスマージンを設定し、カラムにパディングを付けて余白を作っていました。

Bootstrap5では、この仕組みが改善され、余白を管理するためにg-*というユーティリティクラスが導入されました。

<!-- Bootstrap4の例 -->
<div class="row">
  <div class="col-6">左</div>
  <div class="col-6">右</div>
</div>

<!-- Bootstrap5の例 -->
<div class="row g-3">
  <div class="col-6">左</div>
  <div class="col-6">右</div>
</div>

このように、Bootstrap5では数字を変えるだけで余白の大きさを自由に調整できます。例えばg-1は小さな余白、g-5は大きな余白になります。

4. gapの導入

4. gapの導入

Bootstrap5では新たに「gap」という仕組みが取り入れられました。これはCSSのFlexboxやGridで使えるプロパティで、要素の間隔をシンプルに指定できます。gutterと同じ役割を果たしますが、より直感的でモダンな方法です。

<style>
  .gap-sample {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .gap-sample div {
    background: #e3f2fd;
    padding: 20px;
  }
</style>

<div class="gap-sample">
  <div>左</div>
  <div>右</div>
</div>

このように、gapを使えば行や列に余白を設定でき、Bootstrap5でもg-クラスと組み合わせて使われています。

5. グリッド移行のポイント

5. グリッド移行のポイント

Bootstrap4から5へ移行する際のグリッドのポイントをまとめると次の通りです。

• .col-sm-*などの指定はそのまま使えるが、.colだけでも十分自動調整が効く。
• gutterはg-*クラスで統一的に管理できるようになった。
• gapプロパティが導入され、CSS標準と同じ感覚で余白を扱える。
• 移行の際は、余白の崩れがないかブラウザで逐一確認するのが大切。

こうした違いを理解しておけば、Bootstrap4から5への移行はスムーズに行えます。特に余白の管理は見た目の印象を大きく左右するため、慎重に確認すると良いでしょう。