使い方(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
●左右のガターを0.125remずつにする:.gx-1
●左右のガターを0.25remずつにする:.gx-2
●左右のガターを0.5remずつにする:.gx-3
●左右のガターを0.75remずつにする:.gx-4
●左右のガターを1.5remずつにする:.gx-5
※.gx-*
がない場合(参考)
デフォルトでは左右のガターは0.75remずつに設定されている
垂直方向のガター(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
●上側のガターを0.25remにする:.gy-1
●上側のガターを0.5remにする:.gy-2
●上側のガターを1remにする:.gy-3
●上側のガターを1.5remにする:.gy-4
●上側のガターを3remにする:.gy-5
※.gy-*
がない場合(参考)
水平・垂直ガター(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
●左右のガターを0.125remずつ、上側のガターを0.25remにする:.g-1
●左右のガターを0.25remずつ、上側のガターを0.5remにする:.g-2
●左右のガターを0.5remずつ、上側のガターを1remにする:.g-3
●左右のガターを0.75remずつ、上側のガターを1.5remにする:.g-4
●左右のガターを1.5remずつ、上側のガターを3remにする:.g-5
※.g-*
がない場合(参考)
行列グリッドにガター(Row columns gutters)
ガタークラスは行列グリッドにも追加可能。以下の見本では、レスポンシブの行列グリッドクラスとレスポンシブのガタークラスを使用する。
見本
設定例
<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
付きの場合
※.g-0
なしの場合(参考)
●.container
なしの場合
※.container
, .g-0
なしの場合(参考)
設定例
.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>
Bootstrap5.xの設定例 緑背景が変更箇所
.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="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マップから構築される。
デフォルトの設定
scss/_variables.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
は、01
は、$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ずつ)