グリッドシステム Grid system

12columnシステム、6つのデフォルトのレスポンシブティア、Sass変数とmixins、および数十の事前定義されたclassesのおかげで、強力なモバイルファーストのflexboxグリッドを使用して、あらゆる形状とサイズのレイアウトを構築します。

On this page

例

Bootstrapのgridシステムはcontainersとrowsとcolumnsのシリーズを使用して、コンテンツをレイアウトおよび配置します。flexboxで構築され、完全にレスポンシブです。以下は、gridシステムがどのように組み合わされるかについての例と詳細な説明です。

flexboxに不慣れですか？ 背景、用語、ガイドライン、およびコードスニペットについては、このCSS Tricks flexboxガイドをお読みください。

Column

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>

上記の例では、事前定義されたgrid classesを使用して、すべてのデバイスとビューポートで3つの等幅columnsを作成しています。これらのcolumnsは、親の.containerを使用してページの中央に配置されます。

仕組み

gridシステムがどのように組み合わされるかを分解すると、次のようになります：

Gridは6つのレスポンシブbreakpointsをサポートしています。 Breakpointsはmin-width media queriesに基づいているため、そのbreakpointとそれより上のすべてに影響します（例：.col-sm-4はsm、md、lg、xl、xxlに適用されます）。これは、各breakpointごとにcontainerとcolumnのサイズと動作を制御できることを意味します。
Containersはコンテンツを中央に配置し、水平方向にパディングします。 レスポンシブなピクセル幅には.containerを使用し、すべてのビューポートとデバイスでwidth: 100%にするには.container-fluidを使用し、fluidとピクセル幅の組み合わせにはレスポンシブcontainer（例：.container-md）を使用します。
Rowsはcolumnsのラッパーです。 各columnには、それらの間のスペースを制御するための水平padding（gutterと呼ばれます）があります。このpaddingは、コンテンツがcolumns内で視覚的に左側に揃うように、負のmarginsでrowsで相殺されます。Rowsは、均一にcolumnサイズを適用したり、gutter classesでコンテンツの間隔を変更したりするための修飾子classesもサポートしています。
Columnsは非常に柔軟です。 rowごとに12個のtemplate columnsが利用可能で、任意の数のcolumnsにまたがる要素のさまざまな組み合わせを作成できます。Column classesは、またがるtemplate columnsの数を示します（例：col-4は4つをまたぎます）。widthはパーセンテージで設定されるため、常に同じ相対サイズになります。
Guttersもレスポンシブでカスタマイズ可能です。 Gutter classesはすべてのbreakpointsで利用でき、marginとpaddingのスペーシングと同じすべてのサイズが含まれます。.gx-* classesで水平guttersを変更し、.gy-*で垂直guttersを変更し、.g-* classesですべてのguttersを変更します。.g-0もguttersを削除するために使用できます。
Sass変数、maps、およびmixinsがgridを動かしています。 Bootstrapで事前定義されたgrid classesを使用したくない場合は、gridのソースSassを使用して、より意味的なマークアップで独自のものを作成できます。また、これらのSass変数を消費するためのCSS customプロパティもいくつか含まれており、さらに柔軟性が向上します。

flexboxの制限とflexboxに関するバグ（一部のHTML要素をflexコンテナとして使用できないことなど）に注意してください。

Gridオプション

Bootstrapのgridシステムはすべてのデフォルトのbreakpointsとカスタマイズするbreakpointsに適応できます。デフォルトの6つのgridティアは次のとおりです：

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

上記のように、これらの各breakpointsには独自のcontainer、一意のclassプレフィックス、および修飾子があります。これらのbreakpoints全体でgridがどのように変化するかを次に示します：

	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

明示的な番号付きclassなしで簡単なcolumnサイズ設定を行うには、breakpoint固有のcolumn classesを利用します（例：.col-sm-6なし）。

等幅

例えば、xsからxxlまで、すべてのデバイスとビューポートに適用される2つのgridレイアウトを次に示します。必要な各breakpointに対して、任意の数の単位なしのclassesを追加すると、すべてのcolumnが同じ幅になります。

1 of 2

2 of 2

1 of 3

2 of 3

3 of 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つのcolumn幅の設定

flexbox gridのauto-layoutは、1つのcolumnの幅を設定し、その周りの兄弟columnsを自動的にリサイズすることもできます。事前定義されたgrid classes（以下に示すように）、grid mixins、またはインライン幅を使用できます。他のcolumnsは、中央のcolumnの幅に関係なくリサイズされることに注意してください。

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 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-{breakpoint}-auto classesを使用して、コンテンツの自然な幅に基づいてcolumnsをサイズ設定します。

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

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

レスポンシブclasses

Bootstrapのgridには、複雑なレスポンシブレイアウトを構築するための6つの事前定義されたclassesのティアが含まれています。extra small、small、medium、large、またはextra largeデバイスでcolumnsのサイズを適切にカスタマイズします。

すべてのbreakpoints

最小のデバイスから最大のデバイスまで同じgridの場合、.colと.col-* classesを使用します。特別にサイズ設定されたcolumnが必要な場合は番号付きclassを指定します。それ以外の場合は、.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-* classesを使用すると、積み重ねから始まり、small breakpoint（sm）で水平になる基本的なgridシステムを作成できます。

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>

混合とマッチ

一部のgridティアでcolumnsを単に積み重ねたくないですか？必要に応じて、各ティアに異なるclassesの組み合わせを使用します。すべてがどのように機能するかについてのより良いアイデアについては、以下の例を参照してください。

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

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

これらのrow columns classesを使用して、基本的なgridレイアウトやcard layoutsをすばやく作成します。

Column

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>

Column

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>

Column

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>

Column

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>

Column

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>

Column

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 mixin 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);
  }
}

ネスト

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

Level 1: .col-sm-3

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

Level 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変数とmixinsを使用してカスタムで意味的で、レスポンシブなページレイアウトを作成するオプションがあります。事前定義されたgrid classesは、これらの同じ変数とmixinsを使用して、高速なレスポンシブレイアウト用にすぐに使用できるclassesの全スイートを提供します。

Sass変数

変数とmapsは、columnsの数、gutter幅、およびcolumnsのフロートを開始するmedia queryポイントを決定します。これらを使用して、上記で説明した事前定義されたgrid classesと、以下にリストされているカスタムmixinsを生成します。

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

Mixinsは、個々のgrid columnsに対してセマンティックなCSSを生成するためにgrid変数と組み合わせて使用されます。

// 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);

使用例

変数を独自のカスタム値に変更するか、デフォルト値でmixinsを使用するだけです。以下は、デフォルト設定を使用して、間にgapを持つ2columnレイアウトを作成する例です。

.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

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>

Gridのカスタマイズ

組み込みのgrid Sass変数とmapsを使用して、事前定義されたgrid classesを完全にカスタマイズすることができます。ティアの数、media queryのディメンション、container幅を変更してから、再コンパイルします。

ColumnsとGutters

gridのcolumns数は、Sass変数を介して変更できます。$grid-columnsは各個別のcolumnの幅（パーセント）を生成するために使用され、$grid-gutter-widthはcolumn guttersの幅を設定します。$grid-row-columnsは.row-cols-*の最大columns数を設定するために使用され、この制限を超える数は無視されます。

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

Gridティア

columns自体を超えて、gridティアの数をカスタマイズすることもできます。4つのgridティアだけが必要な場合は、$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変数やmapsに変更を加える場合は、変更を保存して再コンパイルする必要があります。これにより、column幅、offsets、および順序付けのための新しい事前定義されたgrid classesのセットが出力されます。レスポンシブな可視性utilitiesも、カスタムbreakpointsを使用するように更新されます。grid値は必ずpx（rem、em、%ではなく）で設定してください。