GitHubで見る

グリッドシステム

Grid system

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

項目

例

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

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

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>

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

仕組み

グリッドシステムを分解すると、以下のようになる：

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

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

グリッド・オプション

グリッドシステムは、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

カラムの自動レイアウト

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

同じ幅

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

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列の幅を設定する

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

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クラスを使って、内容の自然な幅に基づいてカラムのサイズを調整します。

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>

レスポンシブ・クラス

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

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

最小のデバイスから最大のデバイスまで同じグリッドの場合、.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で列に自然な幅を与えることができます。

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

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

ネスティング

コンテンツをデフォルトのグリッドにネストするには、新しい.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

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

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

Sass変数

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

$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

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

使用例

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

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、％ではありません）。