ガター

Gutters

ガターはカラム間のパディングで、Bootstrapグリッドシステムのコンテンツを配置・整列させるために使います。

項目

仕組み

ガターとは、水平方向のpaddingによって作られるカラムの隙間のことです。 各カラムにpadding-rightとpadding-leftを設定し、各行の最初と最後にネガティブmarginでオフセットしてコンテンツを揃えます。
ガターの初期値は1.5rem(24px)です。 カスタムしてグリッドをパディングとマージンの余白のスケールに合わせることができます。
ガターはレスポンシブに調整することができます。 ブレークポイント固有のガタークラスを使用して、水平、垂直、およびすべてのガターを設定できます。

水平方向のガター

.gx-*クラスを使うと、水平方向のガターを設定することができます。大きめのガターが使われている場合は、パディングユーティリティを使います。不要なオーバーフローを避けるため.containerや.container-fluidを親要素に設定することもできます。たとえば、次の例では.px-4でパディングを増やしています。

Custom column padding

html

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

.rowを.overflow-hiddenラップする方法もあります。

Custom column padding

html

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

縦ガター垂直方向のガター

.gy-*クラスを使うと、垂直方向のガターを設定することができます。水平方向と同様に、垂直方向のガターはページの最後にある.rowの下にオーバーフローを引き起こす可能性があります。このような場合は、.rowを.overflow-hiddenでラップします。

Custom column padding

html

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

水平・垂直方向のガター

.g-*クラスは水平・垂直ガターを設定することができます。次の例では、より小さなガターを使用しているので、.overflow-hiddenでラップする必要はありません。

Custom column padding

html

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

行列ガター

ガタークラスは行の列にも追加できます。次の例では、レスポンシブ行カラムとレスポンシブガタークラスを使います。

Row column

html

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
  </div>
</div>

ガター無し

定義済みのガタークラスは.g-0で取り除くことができます。これにより、.rowのネガティブmarginが削除され、すべての子カラムで水平方向のパディングが削除されます。

端から端までのレイアウトが必要ですか？ 親要素の.containerや.container-fluidを削除してください。

実際には以下のようになります。他のすべての定義済みグリッドクラス（カラム幅、レスポンシブレベル、順序変更などを含む）でも、この方法を継続して使用できることに注意してください。

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ガター修正

ガタークラスは$spacersを継承した$guttersSassマップから生成されます。

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);