Grid system (グリッドシステム)

グリッドシステムは、12 カラムのシステムと 5 段階のレスポンシブ、Sass と mixin、いくつかの定義されたクラスですべての図形とサイズのレイアウトを作成可能です。

On this page

Example

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

flexbox を初めてご利用になる方は Read this CSS Tricks flexbox guideをご参照ください。

Column

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

How it works

Breaking it down, here’s how the grid system comes together:

Our grid supports six responsive breakpoints. をサポートしています。ブレークポイントは min-width のメディアクエリに基づいており、そのブレークポイントとその上のすべてのブレークポイントに影響を与えます (e.g., .col-sm-4 applies to sm, md, lg, xl, and xxl). つまり、ブレークポイントごとにコンテナやカラムのサイズや振る舞いを制御することができます。
コンテナでコンテンツを中央に配置し、水平方向にパディングします。 レスポンシブピクセル幅には .container を使用し、すべてのビューポートやデバイスで .container-fluid を使用して width: 100% を指定します。 (e.g., .container-md)
行は列のラッパーです。 各列には、列間のスペースを制御するための水平方向の padding（ガターと呼ばれます）があります。この「 paddingは、負のマージンを持つ行で打ち消されて、列のコンテンツが視覚的に左側に揃うようにします。行は、コンテンツの間隔を変更するために uniformly apply column sizing や gutter classes を使用してコンテンツの間隔を変更する修飾子クラスもサポートします。
列は非常に柔軟です。 行ごとに12のテンプレート列を使用できるため、任意の数の列にまたがる要素のさまざまな組み合わせを作成できます。列クラスは、スパンするテンプレート列の数を示します (e.g., col-4 spans four). widthはパーセンテージで設定されるため、常に同じ相対的なサイズになります。
ガッターもレスポンシブでカスタマイズ可能です。 すべてのブレークポイントでガータークラスが利用できます。Gutter classes are available。 margin and padding spacingと同じ大きさのガーターが利用できます。.gx- *クラスで水平方向を、 .gy- *で縦方向のを、または .g- *クラスでガーターを変更できます。 .g-0はガーターを削除することもできます。
Sassの変数、マップ、およびミックスインがグリッドのパワーを発揮します。 定義済みのグリッドクラスを使用したくない場合は、grid’s source Sassを使用して、さらに多くのクラスを作成できます。また、これらのSass変数を消費するためのCSSカスタムプロパティをいくつか含んでいるので、より大きな柔軟性があります。

仕様やBugに注意が必要です。

Grid options

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

Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)

上で述べたように、これらのブレークポイントはそれぞれ独自のコンテナ、固有のクラスプレフィックス、および修飾子を持っています。以下に、ブレークポイント間でグリッドがどのように変化するかを示します。

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-width`	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

Auto-layout columns

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

Equal-width

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

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

<div class="container">
  <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>

Setting one column width

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

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

<div class="container">
  <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>

Variable width content

col-{breakpoint}-auto クラスを使って、内容の自然な幅に基づいてカラムのサイズを調整します。

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

<div class="container">
  <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>

Responsive classes

Bootstrapのグリッドには、複雑なレスポンシブレイアウトを構築するための事前定義されたクラスの6つの層が含まれています。extra small, small, medium, large, or extra large(特大、小、中、大、または特大) のデバイスで、適切と思われる方法で列のサイズをカスタマイズします。

All breakpoints

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

col

col-8

col-4

<div class="container">
  <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>

Stacked to horizontal

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

col-sm-8

col-sm-4

col-sm

<div class="container">
  <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>

Mix and match

必要に応じて、層ごとに異なるクラスの組み合わせを使用します。どのように機能するかについては、以下の例をご覧ください。

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- 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 columns

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

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

Column

<div class="container">
  <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>

Column

<div class="container">
  <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>

Column

<div class="container">
  <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>

Column

<div class="container">
  <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>

Column

<div class="container">
  <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>

Column

<div class="container">
  <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);
  }
}

Nesting

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

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<div class="container">
  <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>

Sass

Sassファイルを使用する場合、Sass変数とミックスインを使用して、カスタム、セマンティック、レスポンシブなページレイアウトを作成するオプションがあります。事前定義されたグリッドクラスは、これらと同じ変数とミックスインを使用して、高速応答レイアウト用のすぐに使用できるクラスのスイート全体を提供します。

Variables

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

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

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

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

Mixins

ミックスインはグリッド変数と組み合わせて使用され、個々のグリッド列の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);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Example usage

変数を独自のカスタム値に変更することも、デフォルト値でミックスインを使用することもできます。以下は、デフォルト設定を使用して、間にギャップがある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);
  }
}

Main content

Secondary content

<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>

Customizing the grid

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

Columns and gutters

グリッド列の数は、Sass変数を使用して変更できます。 $grid-columnsは個々の列の幅（パーセント単位）を生成するために使用され、 $grid-gutter-widthは列のガターの幅を設定します。

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

Grid tiers

グリッド層の数をカスタマイズすることもできます。グリッド層を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、％ではありません）。