グリッドシステム

12列システム、6つのデフォルトのレスポンシブティア、Sass変数とmixin、および多数の定義済みクラスのおかげで、強力なモバイルファーストのフレックスボックスグリッドを使用して、あらゆる形状とサイズのレイアウトを構築します。

このページの内容

例

Bootstrapのグリッドシステムは、一連のコンテナ、行、およびカラムを使用してコンテンツをレイアウトおよび配置します。 flexboxで構築されており、完全にレスポンシブです。以下に、グリッドシステムがどのように構成されているかの例と詳細な説明を示します。

flexboxを初めて使う、またはよく知らない場合 このCSS Tricks flexboxガイドで、背景、用語、ガイドライン、およびコードスニペットをご覧ください。

カラム

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

上記の例では、定義済みのグリッドクラスを使用して、すべてのデバイスとビューポートで3つの等幅のカラムを作成します。これらのカラムは、親の.containerを使用してページの中央に配置されます。

仕組み

分解すると、グリッドシステムは次のようになります。

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

flexboxに関する制限事項とバグ、たとえば、一部のHTML要素をフレックスコンテナとして使用できないなどの点に注意してください。

グリッドオプション

Bootstrapのグリッドシステムは、6つのデフォルトのブレークポイントと、カスタマイズしたブレークポイントすべてに対応できます。6つのデフォルトのグリッドティアは次のとおりです。

超小型 (xs)
小型 (sm)
中型 (md)
大型 (lg)
特大 (xl)
超特大 (xxl)

上記のように、これらのブレークポイントにはそれぞれ独自のコンテナ、独自のクラスプレフィックス、および修飾子があります。グリッドがこれらのブレークポイントでどのように変化するかを次に示します。

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
コンテナ `max-width`	なし（自動）	540px	720px	960px	1140px	1320px
クラスプレフィックス	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
カラム数	12
ガター幅	1.5rem (左右に.75rem)
カスタムガター	はい
ネスト可能	はい
カラムの順序	はい

自動レイアウトカラム

.col-sm-6のような明示的な番号付きクラスなしで、ブレークポイント固有のカラムクラスを利用して、カラムのサイズを簡単に変更します。

均等幅

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

1/2

2/2

1/3

2/3

3/3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

1つのカラム幅を設定

フレックスボックスグリッドカラムの自動レイアウトは、1つのカラムの幅を設定し、兄弟カラムがその周りで自動的にサイズ変更されるようにすることも意味します。定義済みのグリッドクラス（以下に示す）、グリッドmixin、またはインライン幅を使用できます。他のカラムは、中央のカラムの幅に関係なくサイズが変更されることに注意してください。

1/3

2/3（幅広）

3/3

1/3

2/3（幅広）

3/3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可変幅コンテンツ

col-{ブレークポイント}-autoクラスを使用して、コンテンツの自然な幅に基づいてカラムのサイズを設定します。

1/3

可変幅コンテンツ

3/3

1/3

可変幅コンテンツ

3/3

html

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

レスポンシブクラス

Bootstrapのグリッドには、複雑なレスポンシブレイアウトを構築するための6つのティアの定義済みクラスが含まれています。必要なサイズに合わせて、超小型、小型、中型、大型、または特大デバイスのカラムのサイズをカスタマイズします。

すべてのブレークポイント

最小のデバイスから最大のデバイスまで同じグリッドの場合は、.colおよび.col-*クラスを使用します。特定のサイズのカラムが必要な場合は番号付きのクラスを指定します。それ以外の場合は、.colに固執してください。

col

col-8

col-4

html

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

水平にスタック

.col-sm-*クラスの単一のセットを使用すると、スタックで開始し、小さなブレークポイント（sm）で水平になる基本的なグリッドシステムを作成できます。

col-sm-8

col-sm-4

col-sm

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

ミックスアンドマッチ

グリッドの階層で単純に列を積み重ねたくないですか？必要に応じて、各階層に異なるクラスを組み合わせて使用してください。どのように機能するかをより良く理解するために、以下の例を参照してください。

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

行の列

レスポンシブな.row-cols-*クラスを使用して、コンテンツとレイアウトを最適にレンダリングする列の数をすばやく設定します。通常の.col-*クラスは個々の列（例：.col-md-4）に適用されるのに対し、行の列クラスは親の.rowにショートカットとして設定されます。.row-cols-autoを使用すると、列に自然な幅を与えることができます。

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

カラム

html

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

カラム

html

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

カラム

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

カラム

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

カラム

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

カラム

html

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

付随するSassミックスインrow-cols()も使用できます。

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

ネスト

デフォルトのグリッドでコンテンツをネストするには、既存の.col-sm-*列内に新しい.rowと.col-sm-*列のセットを追加します。ネストされた行には、合計12以下になる列のセットを含める必要があります（利用可能な12列すべてを使用する必要はありません）。

レベル1：.col-sm-3

レベル2：.col-8 .col-sm-6

レベル2：.col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

CSS

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

Sass変数

変数とマップは、列の数、ガター幅、および列のフローティングを開始するメディアクエリのポイントを決定します。これらを使用して、上記の定義済みのグリッドクラスと、以下に示すカスタムミックスインを生成します。

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

scss/_variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

scss/_variables.scss

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sassミックスイン

ミックスインは、グリッド変数と組み合わせて、個々のグリッド列のセマンティックCSSを生成するために使用されます。

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

使用例

変数を独自のカスタム値に変更したり、デフォルト値でミックスインを使用したりできます。以下は、デフォルト設定を使用して、間にギャップのある2列レイアウトを作成する例です。

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  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">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

グリッドのカスタマイズ

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

列とガター

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

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

グリッド階層

列自体を超えて、グリッド階層の数をカスタマイズすることもできます。グリッド階層を4つだけにする場合は、$grid-breakpointsと$container-max-widthsを次のように更新します。

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

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

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