グリッドシステム（Grid system）

実例（Example）

Bootstrapのグリッドシステムは、一連のコンテナ、行、列を使用して、コンテンツのレイアウトし、整列する。これはFlexboxで構築され、完全にレスポンシブする。以下は、グリッドシステムがどのように統合されるかについての例と詳細な説明。

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

設定例

<div class="container text-center">
  <div class="row">
    <div class="col-sm">
      3つの列の1列目
    </div>
    <div class="col-sm">
      3つの列の2列目
    </div>
    <div class="col-sm">
      3つの列の3列目
    </div>
  </div>
</div>

上記の実例では、定義済のグリッドクラスを使用して、小、中、大、特大、超特大型デバイスで3つの等幅列を作成している。それらの列は親要素の .container を持つページの中央に配置される。

使い方（How it works）

分解してグリッドシステムがどのように統合されるかを以下に表示：

• Bootstrapのグリッドは、6つのレスポンシブ・ブレークポイントをサポート。ブレークポイントは最小幅のメディアクエリに基づく。つまり、そのブレークポイントとそれより上のすべてのブレークポイントに影響する（例：.col-sm-4 は sm, md, lg, xl, xxl で適用）。これにより各ブレークポイントによってコンテナと列のサイズと動作が制御できる。
• コンテナはコンテンツを中央に配置し、水平方向に空白を設ける。レスポンシブ・ピクセル幅の場合は .container、すべてのビューポートでデバイス全体が width: 100% の場合は .container-fluid、両方を組み合わせたレスポンシブ・コンテナ（例：.container-md）を使用。
• 行（row、ロー）で列（column、カラム）を囲む。各列には、それらの間の余白を制御するための水平方向の padding（gutter、ガターと呼ぶ）がある。次に、この padding が負のマージンを持つ行で打ち消され、列のコンテンツが視覚的に行頭側に揃えられる。行は、列のサイズ変更を均一に適用する行列クラスとガタークラスもサポートして、コンテンツの間隔を変更する。
• 列は非常に柔軟な存在。行ごとに12のテンプレート列を使用できるため、任意の数の列にまたがる要素のさまざまな組み合わせが作成できる。列クラスは、またがるテンプレート列の数を示す（例：.col-4 は4列にまたがる）。width はパーセンテージで設定されるため、常に同じ相対的なサイズになる。
• ガターもレスポンシブ性が高くカスタマイズできる。ガタークラスは、すべてのブレークポイントで利用でき、サイズはマージンとパディングの間隔と同じである。.gx-* クラスは水平方向のガター、.gy-* は垂直方向のガター、.g-* クラスは両方向のガターを変更する。.g-0 でガターを削除できる。
• Sass変数、マップ、ミックスインがグリッドに力を与える。Bootstrapで定義済のグリッドクラスを使用しない場合は、グリッドのSass変数を使用して、よりセマンティックなマークアップを備えた独自のクラスが作成できる。これらのSass変数を使用するためのCSSカスタムプロパティもいくつか含まれており、柔軟性がさらに高まる。

FlexboxのいくつかのHTML要素を使用できないなど、Flexboxに関する制限やバグに注意。

グリッド・オプション（Grid options）

Bootstrapのグリッドシステムは、6つのデフォルトブレークポイントすべてと、カスタマイズしたブレークポイント全体に適応できる。6つのデフォルトのグリッド層は以下のとおり：

• 極小 (xs)
• 小 (sm)
• 中 (md)
• 大 (lg)
• 特大 (xl)
• 超特大 (xxl) v5.0.0-alpha1追加

上記のように、これらの各ブレークポイントには、独自のコンテナ、一意のクラスの接頭辞、修飾子がある。これらのブレークポイントでグリッドがどのように変化するかを以下に表示：

定義済クラスの種類（* は1～12の整数と auto）

※.col(-{breakpoint})-* の * は、

• 1 は、その列に width: 8.33333333%（12分の1（1列分）の幅サイズ）を設定
• 2 は、その列に width: 16.66666667%（6分の1（2列分）の幅サイズ）を設定
• 3 は、その列に width: 25%（4分の1（3列分）の幅サイズ）を設定
• 4 は、その列に width: 33.33333333%（3分の1（4列分）の幅サイズ）を設定
• 5 は、その列に width: 41.66666667%（12分の5（5列分）の幅サイズ）を設定
• 6 は、その列に width: 50%（2分の1（6列分）の幅サイズ）を設定
• 7 は、その列に width: 58.33333333%（12分の7（7列分）の幅サイズ）を設定
• 8 は、その列に width: 66.66666667%（3分の2（8列分）の幅サイズ）を設定
• 9 は、その列に width: 75%（4分の3（9列分）の幅サイズ）を設定
• 10 は、その列に width: 83.33333333%（6分の5（10列分）の幅サイズ）を設定
• 11 は、その列に width: 91.66666667%（12分の11（11列分）の幅サイズ）を設定
• 12 は、その列に width: 100%（全幅（12列分）の幅サイズ）を設定
• auto は、その列に width: auto（自動幅サイズ）を設定

する。

列の自動レイアウト（Auto-layout columns）

.col-sm-6 のような明示的に番号を付けられたクラスがなければ、簡単な列サイズ設定のためにブレークポイント固有の列クラスを利用する。

等幅（Equal-width）

例えば、xs から xl までのすべてのデバイスとビューポートに適用される2つのグリッドレイアウトがある。必要なブレークポイントごとに任意の数の単位のないクラスを追加し、すべての列が同じ幅になるようにする。

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

設定例

<div class="container text-center">
  <!-- 2分割列の設定 -->
  <div class="row">
    <div class="col">
      2つの列の1列目
    </div>
    <div class="col">
      2つの列の2列目
    </div>
  </div>
  <!-- 3分割列の設定 -->
  <div class="row">
    <div class="col">
      3つの列の1列目
    </div>
    <div class="col">
      3つの列の2列目
    </div>
    <div class="col">
      3つの列の3列目
    </div>
  </div>
</div>

1列の幅の設定（Setting one column width）

Flexboxグリッド列の自動レイアウトはまた、ある1列の幅を設定できることを意味し、その列の周りに自動的に兄弟列のサイズが変更できる。定義済のグリッドクラス（以下に表示）、グリッドミックスイン、インライン幅を使用できる。他の列は、中央の列の幅に関係なくサイズが変更される。

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

設定例

<div class="container text-center">
  <div class="row">
    <div class="col">
      3つの列の1列目
    </div>
    <div class="col-6">
      3つの列の2列目 (広め)
    </div>
    <div class="col">
      3つの列の3列目
    </div>
  </div>
  <div class="row">
    <div class="col">
       3つの列の1列目
    </div>
    <div class="col-5">
      3つの列の2列目 (広め)
    </div>
    <div class="col">
      3つの列の3列目
    </div>
  </div>
</div>

可変幅コンテンツ（Variable width content）

col(-{breakpoint})-auto クラスを使用して、コンテンツの自然な幅に基づいて列のサイズを設定する。

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

設定例

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      3つの列の1列目
    </div>
    <div class="col-md-auto">
      可変幅コンテンツ
    </div>
    <div class="col col-lg-2">
      3つの列の3列目
    </div>
  </div>
  <div class="row">
    <div class="col">
      3つの列の1列目
    </div>
    <div class="col-md-auto">
      可変幅コンテンツ
    </div>
    <div class="col col-lg-2">
      3つの列の3列目
    </div>
  </div>
</div>

レスポンシブ・クラス（Responsive classes）

Bootstrapのグリッドには、複雑なレスポンシブ・レイアウトを構築するための6つの階層が定義されている。極小、小、中、大、特大、超特大規模のデバイスで、列のサイズをカスタマイズできる。

全てのブレークポイント（All breakpoints）

デバイスの最小サイズから最大サイズまで同じグリッドの場合は、.col や .col-* クラスを使用。特定のサイズの列が必要な場合は、番号付きクラスを指定。それ以外の場合は、.col を付けて下さい。

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

設定例

4列で表示<div class="container text-center">
  <div class="row">
    <div class="col">1列目...</div>
    <div class="col">2列目...</div>
    <div class="col">3列目...</div>
    <div class="col">4列目...</div>
  </div>
</div>

2:1で表示<div class="container">
  <div class="row">
    <div class="col-8">1列目...</div>
    <div class="col-4">2列目...</div>
  </div>
</div>

モバイルでは縦積み（Stacked to horizontal）

.col-sm-* クラスを使用すると、小（sm）以上のブレークポイントでは横並びに表示、モバイルデバイス（極小）では縦積みに表示される基本的なグリッドシステムが作成できる。

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

設定例

2:1で表示<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">1列目: .col-sm-8</div>
    <div class="col-sm-4">2列目: .col-sm-4</div>
  </div>
</div>

1:1:1で表示<div class="container">
  <div class="row">
    <div class="col-sm">1列目: .col-sm</div>
    <div class="col-sm">2列目: .col-sm</div>
    <div class="col-sm">3列目: .col-sm</div>
  </div>
</div>

ミックス＆マッチ（Mix and match）

列を単純にいくつかのグリッド階層で縦積みにしたいなら、必要に応じて、各階層に異なるクラスの組み合わせを使用。すべての動作でより良く見える方法については、以下の実例に記載。

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

設定例

極小/小サイズでは列を縦積みに表示、中サイズ以上では2:1で表示<div class="container text-center">
  <div class="row">
    <div class="col-md-8">1列目: .col-md-8</div>
    <div class="col-6 col-md-4">2列目: .col-6 .col-md-4</div>
  </div>
</div>

極小/小サイズでは1:1+縦積みに表示、中サイズ以上では1:1:1で表示<div class="container">
  <div class="row">
    <div class="col-6 col-md-4">1列目: .col-6 .col-md-4</div>
    <div class="col-6 col-md-4">2列目: .col-6 .col-md-4</div>
    <div class="col-6 col-md-4">3列目: .col-6 .col-md-4</div>
  </div>
</div>

常に1:1で表示<div class="container">
  <div class="row">
    <div class="col-6">1列目: .col-6</div>
    <div class="col-6">2列目: .col-6</div>
  </div>
</div>

行列グリッド（Row columns）

レスポンシブ .row-cols-* クラスを使用して、コンテンツとレイアウトを最も適切に表示する1行の列数（1～6）を迅速に設定。通常の .col-* クラス（.col-md-4 など）は個々の列に適用されるが、行列グリッドクラスはショートカットとして親要素の .row に設定される。.row-cols-auto を使用すれば列に自然な幅が設定される。

これらの行列クラスを使用して、基本的なグリッドレイアウトをすばやく作成したり、カードレイアウトを制御したりする。

1. 1行に2列で設定

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

設定例

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="col">3列目</div>
    <div class="col">4列目</div>
  </div>
</div>

2. 1行に3列で設定

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

設定例

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="col">3列目</div>
    <div class="col">4列目</div>
  </div>
</div>

3. 1行に4列で設定（幅の大きさは自動）v5.0.0-alpha1追加

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

設定例

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="col">3列目</div>
    <div class="col">4列目</div>
  </div>
</div>

4. 1行に4列で設定（幅の大きさは均等）

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

設定例

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="col">3列目</div>
    <div class="col">4列目</div>
  </div>
</div>

5. 列の幅が均等ではない場合

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

設定例

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="col-6">3列目</div>
    <div class="col">4列目</div>
  </div>
</div>

6. ビューポートに応じて列数が変化

モバイルでは1列4行だが、ビューポート小以上では2列2行、さらにビューポート中以上で4列1行となる。

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

設定例

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="col">3列目</div>
    <div class="col">4列目</div>
  </div>
</div>

付属のSassミックスイン、row-cols() も使用できる。

設定例

custom.scss.element {
  // 最初は3列
  @include row-cols(3);

  // 中ブレークポイントからは5列
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

定義済クラスの種類（* は1～6の整数と auto）

※.row-cols(-{breakpoint})-* の * は、

• 1 は、各列に width: 100%（1行に1列）を設定
• 2 は、各列に width: 50%（1行に2列）を設定
• 3 は、各列に width: 33.3333333333%（1行に3列）を設定
• 4 は、各列に width: 25%（1行に4列）を設定
• 5 は、各列に width: 20%（1行に5列）を設定
• 6 は、各列に width: 16.6666666667%（1行に6列）を設定
• auto は、各列に width: auto（自動幅サイズ）を設定

する。

入れ子（Nesting）

既定のグリッドでコンテンツを入れ子（ある要素を別の要素の中に入れること）にするには、既存の .col-sm-* の列内に新しい .row と .col-sm-* の列のセットを追加する。入れ子になった行には、最大12サイズ以内の列を含む必要がある（12サイズの列をすべて使用する必要はない）。

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

設定例

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      親の1列目: .col-sm-3
    </div>
    <div class="col-sm-9"><!-- 親の2列目 -->
      <div class="row">
        <div class="col-8 col-sm-6">
          子の1列目: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          子の2列目: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

CSS v5.3.0Sassから名称変更

BootstrapのソースSassファイルを使用するときは、Sass変数とミックスインを使用して、カスタムで、セマンティックで、レスポンシブなページレイアウトが作成できる。定義済のグリッドクラスは、これらの同じ変数とミックスインを使用して、迅速にレスポンシブ・レイアウトに対応したすぐに使えるクラスを提供する。

Sass変数（Sass variables）v5.3.0変数から名称変更

変数とマップは、列の数、ガターの幅、列の移動を開始するメディアクエリポイントを決定。これらを使用して下記の定義済のグリッドクラスとカスタムミックスインを生成。

デフォルトの設定

scss/_variables.scss 内$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

scss/_variables.scss 内 grid-breakpoints の設定$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

scss/_variables.scss 内 container-max-widths の設定$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sassミックスイン（Sass mixins）v5.0.0変更、v5.3.0mixinから名称変更

ミックスインは、グリッド変数とともに使用され、個々のグリッド列に対してセマンティックなCSSを生成する。

設定例

custom.scss// 一連の列の囲みを作成
@include make-row();

// 要素をグリッド対応に作成（幅以外のすべてを適用）
@include make-col-ready();

// オプションのサイズ値がない場合、ミックスインは等列を作成（.colの使用と同様）
@include make-col();
@include make-col($size, $columns: $grid-columns);

// マージンのあるオフセット
@include make-col-offset($size, $columns: $grid-columns);

使用例（Example usage）

Sass変数やマップを変更する場合は、変更を保存して再コンパイルする必要がある。そうすることで、列の幅、オフセット、順序付けのための定義済グリッドクラスの新しいセットが用意される。また、任意のブレークポイントを使用するようにレスポンシブな可視性ユーティリティも更新される。

設定例

custom.scss.example-container {
  @include make-container();
  // ミックスインの後にこの幅を定義して、`make-container()`によって生成された`width: 100%`を再定義
  width: 800px;
}
.example-row {
  @include make-row();
}
.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}
.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

HTML<div class="example-container text-center">
  <div class="example-row">
    <div class="example-content-main">メインコンテンツ</div>
    <div class="example-content-secondary">サブコンテンツ</div>
  </div>
</div>

上記設定での表示 見やすいよう色と枠を付けています

グリッドのカスタマイズ（Customizing the grid）

組み込まれているグリッドSass変数とマップを使用して、定義済のグリッドクラスを完全にカスタマイズできる。階層の数、メディアクエリの寸法やコンテナの幅を変更して再コンパイルする。

列とガター（Columns and gutters）v5.2.1一部追加

グリッド列の数はSass変数で変更できる。$grid-columns は、個々の列の幅（パーセント）を生成するために、$grid-gutter-width は、ガター（グリッド列の間隔）の幅を設定するために使用。 $grid-row-columns は、 .row-cols-* の列の最大数を設定するために使用。この制限を超える数は無視される。

デフォルトの設定

scss/_variables.scss 内$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

グリッド階層（Grid tiers）

列そのものを超えて移動できるようにグリッド階層の数のカスタマイズもできる。4グリッド階層だけが必要なら、$grid-breakpoints と $container-max-widths を次のように更新：

設定例

custom.scss$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sassの変数やマップを変更するときは、変更を保存して再コンパイルする必要がある。そうすることで列の幅と順序の定義済のグリッドクラスの新しいセットが出力される。またカスタムブレークポイントを使用するようにレスポンシブの表示ユーティリティも更新される。グリッド値はpx（rem, em, % ではなく）で設定して下さい。