グリッドシステム

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

このページでは

例

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

flexbox は初めてですか、またはよく知りませんか? 背景、用語、ガイドライン、およびコードスニペットについては、この CSS トリックフレックスボックスガイドをお読みください。

桁

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) 。これは、コンテナーと列のサイズと動作を各ブレークポイントで制御できることを意味します。mdlgxlxxl
コンテナはコンテンツを中央に配置し、水平方向にパディングします。.containerレスポンシブピクセル幅、.container-fluidすべてwidth: 100%のビューポートとデバイス、またはフルイド.container-mdとピクセル幅の組み合わせのレスポンシブコンテナー (例: ) に使用します。
行は列のラッパーです。各列には、それらの間のスペースを制御するための水平padding(ガターと呼ばれる) があります。これpaddingは、列のコンテンツが視覚的に左側に揃えられるように、負のマージンを持つ行で打ち消されます。行は、列のサイズ変更を均一に適用するための修飾子クラスと、コンテンツの間隔を変更するためのガタークラスもサポートしています。
列は信じられないほど柔軟です。行ごとに 12 個のテンプレート列を使用できるため、任意の数の列にまたがる要素のさまざまな組み合わせを作成できます。列クラスは、スパンするテンプレート列の数を示します (たとえば、col-4スパン 4)。widths はパーセンテージで設定されるため、常に同じ相対サイズになります。
ガターもレスポンシブでカスタマイズ可能です。 Gutter クラスはすべてのブレークポイントで利用でき、マージンとパディングの間隔とすべて同じサイズです。水平ガターを.gx-*クラスで、垂直ガターをで.gy-*、またはすべてのガターを.g-*クラスで変更します。.g-0ガターの取り外しも可能です。
Sass 変数、マップ、および mixin がグリッドを強化します。Bootstrap で定義済みのグリッドクラスを使用したくない場合は、グリッドのソース Sassを使用して、よりセマンティックなマークアップを使用して独自のクラスを作成できます。さらに柔軟性を高めるために、これらの Sass 変数を使用するためのいくつかの CSS カスタムプロパティも含まれています。

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

グリッドオプション

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。

等幅

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

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 つの列の幅を設定し、兄弟列のサイズを自動的に変更できることも意味します。定義済みのグリッドクラス (以下を参照)、グリッドミックスイン、またはインライン幅を使用できます。中央の列の幅に関係なく、他の列のサイズが変更されることに注意してください。

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-{breakpoint}-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-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>

水平に積み上げ

クラスの 1 つのセットを使用して、.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 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一連の列を追加します。ネストされた行には、合計が 12 以下になる一連の列を含める必要があります (使用可能な 12 列すべてを使用する必要はありません)。.col-sm-*.col-sm-*

レベル 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>

サス

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

変数

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

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

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

ミックスイン

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

使用例

変数を独自のカスタム値に変更するか、ミックスインをデフォルト値で使用することができます。以下は、既定の設定を使用して、間に隙間のある 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-breakpointsand$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、またはではなく)にグリッド値を設定してください%。

グリッドシステム

例

使い方

グリッド オプション

自動レイアウト列

等幅

1 列幅の設定

可変幅コンテンツ

レスポンシブ クラス

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

水平に積み上げ

ミックス＆マッチ

行の列

ネスティング

サス

変数

ミックスイン

使用例

グリッドのカスタマイズ

柱と樋

グリッド層

グリッドオプション

レスポンシブクラス