メインコンテンツへスキップ

ガター（Gutters） v5.0.0-alpha1設定変更 v5.0.0-alpha1グリッドより分離

ガターは列間のpaddingであり、Bootstrapグリッドシステムでコンテンツの間隔を空けて配置するために使用される。

目次

使い方（How they work）

  • ガター（グリッド列の間隔）は、列のコンテンツ間のギャップであり、水平方向のpaddingによって作成される。 各列に padding-right と padding-left を設定し、負のmarginを使用して各行の最初と最後にそれをオフセットし、コンテンツを揃える。
  • ガターの幅は 1.5rem（24px）。これにより、グリッドをパッディングとマージンの空白のスケールに合わせる。
  • ガターはレスポンシブに調整できる。ブレークポイント固有のガタークラスを使用して、水平方向のガター、垂直方向のガター、4方向すべてのガターを変更。

 

水平方向のガター（Horizontal gutters）

.gx-* クラスを使用して、水平方向のガター幅が制御できる。大きめのガターを使用する場合は、不要なオーバーフローを回避するために一致するパディングユーティリティを使用して親要素の .container や .container-fluid を調整する必要あり。例えば、以下の見本では、.px-4 でパディングを増やしている：

1. コンテナに .px-* クラスを使用

見本
カスタム列
カスタム列
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="container px-4">
  <div class="row mx-n5">
    <div class="col px-5">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
    <div class="col px-5">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
  </div>
</div>

2. コンテナに .overflow-hidden クラスを使用 v5.0.0-alpha1新設

別の解決策は、.overflow-hidden クラス（はみ出し部分を非表示にする）を使用して .row を囲む。

見本
カスタム列
カスタム列
設定例
<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">カスタム列</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
  </div>
</div>
【設定】
  • .row に .gx(-{breakpoint})-{size}（下記の「定義済クラスの種類」から選択）を入れる
    • {breakpoint}（sm（小）, md（中）, lg（大）, xl（特大）, xxl（超特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる
    • {size}は、$gutters の設定に準ずる（デフォルトでは0～5の整数）
【変更履歴】
  • 【v5.0.0-alpha1】
    • .row.px(-{breakpoint})-{size} > .col-*.px(-{breakpoint})-{size} ⇒ .row.gx(-{breakpoint})-{size} > .col-*
定義済クラスの種類
ビューポートサイズ 全て
≥0px		 小以上
≥576px		 中以上
≥768px		 大以上
≥992px		 特大以上
≥1200px		 超特大以上
≥1400px
左右のガターを0 .gx-0 .gx-sm-0 .gx-md-0 .gx-lg-0 .gx-xl-0 .gx-xxl-0
左右のガターを0.125remずつ .gx-1 .gx-sm-1 .gx-md-1 .gx-lg-1 .gx-xl-1 .gx-xxl-1
左右のガターを0.25remずつ .gx-2 .gx-sm-2 .gx-md-2 .gx-lg-2 .gx-xl-2 .gx-xxl-2
左右のガターを0.5remずつ .gx-3 .gx-sm-3 .gx-md-3 .gx-lg-3 .gx-xl-3 .gx-xxl-3
左右のガターを0.75remずつ .gx-4 .gx-sm-4 .gx-md-4 .gx-lg-4 .gx-xl-4 .gx-xxl-4
左右のガターを1.5remずつ .gx-5 .gx-sm-5 .gx-md-5 .gx-lg-5 .gx-xl-5 .gx-xxl-5
見本 見やすいよう色と外枠を付けています

●左右のガターを0にする：.gx-0

1列目
2列目

●左右のガターを0.125remずつにする：.gx-1

1列目
2列目

●左右のガターを0.25remずつにする：.gx-2

1列目
2列目

●左右のガターを0.5remずつにする：.gx-3

1列目
2列目

●左右のガターを0.75remずつにする：.gx-4

1列目
2列目

●左右のガターを1.5remずつにする：.gx-5

1列目
2列目

※.gx-* がない場合（参考）
デフォルトでは左右のガターは0.75remずつに設定されている

1列目
2列目

 

垂直方向のガター（Vertical gutters）

.gy-* クラスを使用して、垂直方向のガター幅が制御できる。水平方向のガターと同様に垂直方向のガターは、ページの最後の .row の下にオーバーフローを引き起こす可能性がある。これが発生する場合は、.overflow-hidden クラスを使用して .row の周りを囲む。

見本
カスタム列
カスタム列
カスタム列
カスタム列
設定例
<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
  </div>
</div>
【設定】
  • .row に .gy(-{breakpoint})-{size}（下記の「定義済クラスの種類」から選択）を入れる
    • {breakpoint}（sm（小）, md（中）, lg（大）, xl（特大）, xxl（超特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる
    • {size}は、$gutters の設定に準ずる（デフォルトでは0～5の整数）
定義済クラスの種類
ビューポートサイズ 全て
≥0px		 小以上
≥576px		 中以上
≥768px		 大以上
≥992px		 特大以上
≥1200px		 超特大以上
≥1400px
上側のガターを0 .gy-0 .gy-sm-0 .gy-md-0 .gy-lg-0 .gy-xl-0 .gy-xxl-0
上側のガターを0.25rem .gy-1 .gy-sm-1 .gy-md-1 .gy-lg-1 .gy-xl-1 .gy-xxl-1
上側のガターを0.5rem .gy-2 .gy-sm-2 .gy-md-2 .gy-lg-2 .gy-xl-2 .gy-xxl-2
上側のガターを1rem .gy-3 .gy-sm-3 .gy-md-3 .gy-lg-3 .gy-xl-3 .gy-xxl-3
上側のガターを1.5rem .gy-4 .gy-sm-4 .gy-md-4 .gy-lg-4 .gy-xl-4 .gy-xxl-4
上側のガターを3rem .gy-5 .gy-sm-5 .gy-md-5 .gy-lg-5 .gy-xl-5 .gy-xxl-5
見本 見やすいよう色と外枠を付けています

●上側のガターを0にする：.gy-0

1列目
2列目

●上側のガターを0.25remにする：.gy-1

1列目
2列目

●上側のガターを0.5remにする：.gy-2

1列目
2列目

●上側のガターを1remにする：.gy-3

1列目
2列目

●上側のガターを1.5remにする：.gy-4

1列目
2列目

●上側のガターを3remにする：.gy-5

1列目
2列目

※.gy-* がない場合（参考）

1列目
2列目

 

水平・垂直ガター（Horizontal & vertical gutters）

.g-* クラスを使用して水平・垂直方向のガター幅が制御できる。以下の見本では、ガター幅を小さくしているため、.overflow-hidden ラッパークラスを追加する必要はない。

見本
カスタム列
カスタム列
カスタム列
カスタム列
設定例
<div class="container">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">カスタム列</div>
    </div>
  </div>
</div>
【設定】
  • .row に .g(-{breakpoint})-{size}（下記の「定義済クラスの種類」から選択）を入れる
    • {breakpoint}（sm（小）, md（中）, lg（大）, xl（特大）, xxl（超特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる
    • {size}は、$gutters の設定に準ずる（デフォルトでは0～5の整数）
定義済クラスの種類
ビューポートサイズ 全て
≥0px		 小以上
≥576px		 中以上
≥768px		 大以上
≥992px		 特大以上
≥1200px		 超特大以上
≥1400px
全方向のガターを0 .g-0 .g-sm-0 .g-md-0 .g-lg-0 .g-xl-0 .g-xxl-0
全方向のガターを0.25rem .g-1 .g-sm-1 .g-md-1 .g-lg-1 .g-xl-1 .g-xxl-1
全方向のガターを0.5rem .g-2 .g-sm-2 .g-md-2 .g-lg-2 .g-xl-2 .g-xxl-2
全方向のガターを1rem .g-3 .g-sm-3 .g-md-3 .g-lg-3 .g-xl-3 .g-xxl-3
全方向のガターを1.5rem .g-4 .g-sm-4 .g-md-4 .g-lg-4 .g-xl-4 .g-xxl-4
全方向のガターを3rem .g-5 .g-sm-5 .g-md-5 .g-lg-5 .g-xl-5 .g-xxl-5
見本 見やすいよう色と外枠を付けています

●左右、上側のガターを0にする：.g-0

1列目
2列目
3列目
4列目

●左右のガターを0.125remずつ、上側のガターを0.25remにする：.g-1

1列目
2列目
3列目
4列目

●左右のガターを0.25remずつ、上側のガターを0.5remにする：.g-2

1列目
2列目
3列目
4列目

●左右のガターを0.5remずつ、上側のガターを1remにする：.g-3

1列目
2列目
3列目
4列目

●左右のガターを0.75remずつ、上側のガターを1.5remにする：.g-4

1列目
2列目
3列目
4列目

●左右のガターを1.5remずつ、上側のガターを3remにする：.g-5

1列目
2列目
3列目
4列目

※.g-* がない場合（参考）

1列目
2列目
3列目
4列目

 

行列グリッドにガター（Row columns gutters）

ガタークラスは行列グリッドにも追加できる。以下の見本では、レスポンシブの行列グリッドクラスとレスポンシブのガタークラスを使用する。

見本
1列目
2列目
3列目
4列目
5列目
6列目
7列目
8列目
9列目
10列目
設定例
<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <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 class="col">
      <div class="p-3 border bg-light">3列目</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">4列目</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">5列目</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">6列目</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">7列目</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">8列目</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">9列目</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">10列目</div>
    </div>
  </div>
</div>
【設定】
  • .row.row-cols(-{breakpoint})-* に .g({x|y})(-{breakpoint})-{size} を追加

 

ガターなし（No gutters）v5.0.0-alpha1クラス名変更

定義済のグリッドクラスの列の間隔（ガター）は、.g-0 で削除できる。これにより、.row からマイナスのマージンが削除され、すべての直接の子列から水平方向のパディングが削除される。

edge-to-edge（Widthが画面の端から端まであるような）デザインが必要なら、親要素の .container や .container-fluid を外す。

実際の見た目は次のとおり。他のすべての定義済のグリッドクラス（列の幅、レスポンシブの階層、並べ替えなどを含む）は引き続き使用できる。

見本 見やすいよう色と外枠を付けています

●.container 付きの場合

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

※.g-0 なしの場合（参考）

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

●.container なしの場合

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

※.container, .g-0 なしの場合（参考）

.col-sm-6 .col-md-8
.col-6 .col-md-4
Bootstrap5.xの設定例 緑背景が変更箇所
.container 付きの場合<div class="container">
  <div class="row g-0">
    <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>
</div>
.container なしの場合<div class="row g-0">
  <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>
※Bootstrap4.xの設定例 赤背景が変更箇所
.container 付きの場合<div class="container">
  <div class="row no-gutters">
    <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>
</div>
.container なしの場合<div class="row no-gutters">
  <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>
【設定】
  • .row に .g(-{breakpoint})-0 を追加
【変更履歴】
  • 【v5.0.0-alpha1】
    • .no-gutters ⇒ .g-0

 

ガターの設定変更（Changing the gutters）v5.0.0-alpha1新設

各クラスは、$spaces Sassマップから継承された $gutters Sassマップから構築される。

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

※上記の場合、下記各ガタークラス（.g({x|y})(-{breakpoint})-{size}）の {size} の設定は、$gutters の設定に準じて、

  • 0 は、0
  • 1 は、$spacer(1rem)*.25=0.25rem（左右は0.125remずつ）
  • 2 は、$spacer(1rem)*.5=0.5rem（左右は0.25remずつ）
  • 3 は、$spacer(1rem)=1rem（左右は0.5remずつ）
  • 4 は、$spacer(1rem)*1.5=1.5rem（左右は0.75remずつ）
  • 5 は、$spacer(1rem)*3=3rem（左右は1.5remずつ）
となる。