Bootstrap 5 ガタークラスを使ってカラム間のスペースを調整する方法

Bootstrap 5のガタークラスは、グリッドシステム内でカラム間のスペースを簡単に調整するための便利なツールです。この記事では、ガタークラスの種類と使用方法について詳しく説明します。

ガタークラスとは？

ガタークラスは、Bootstrapのグリッドシステムでカラム間のスペースを調整するためのクラスです。これにより、カラム間の間隔を簡単に制御できます。

主なガタークラス

• .gx-*: 水平方向のスペースを調整
• .gy-*: 垂直方向のスペースを調整
• .g-*: 水平・垂直両方のスペースを調整

ガタークラスの使用例

以下の例では、 .gx-5 クラスを使って水平方向のスペースを調整しています。

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3 border bg-light">カラム1</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">カラム2</div>
    </div>
  </div>
</div>

レスポンシブガター

ガターはレスポンシブに調整することができます。例えば、 .gx-sm-5 クラスを使うと、小さいビューポート（576px以上）で水平方向のスペースを調整できます。

オーバーフロー対策

大きめのガターを使用する場合、親要素の .container や .container-fluid に適切なパディングユーティリティを追加することで、不要なオーバーフローを避けることができます。また、 .overflow-hidden クラスを使用して .row を囲むこともできます。

まとめ

Bootstrap 5のガタークラスを使うことで、カラム間のスペースを簡単に調整できます。