メインコンテンツにスキップ ドキュメント ナビゲーションにスキップ
in English

グリッドシステム

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

このページでは

例

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

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

使い方

それを分解すると、グリッドシステムがどのように組み合わされるかは次のとおりです。

  • 当社のグリッドは、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 
<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>

1 列幅の設定

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

1/3
2/3 (より広い)
3/3
1/3
2/3 (より広い)
3/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>

可変幅コンテンツ

クラスを使用col-{breakpoint}-autoして、コンテンツの自然な幅に基づいて列のサイズを調整します。

1/3
可変幅コンテンツ
3/3
1/3
可変幅コンテンツ
3/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>

レスポンシブ クラス

Bootstrap のグリッドには、複雑なレスポンシブ レイアウトを構築するための 6 層の定義済みクラスが含まれています。極小、小、中、大、または特大のデバイスで列のサイズをカスタマイズします。

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

最小のデバイスから最大のデバイスまで同じグリッドの場合は、 クラス.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>

水平に積み上げ

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

col-sm-8
col-sm-4
col-sm
col-sm
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>

ミックス＆マッチ

いくつかのグリッド層に列を単純に積み上げたくないですか? 必要に応じて、層ごとに異なるクラスを組み合わせて使用​​します。すべてがどのように機能するかについてのより良いアイデアについては、以下の例を参照してください。

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.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-cols-*クラスを使用して、コンテンツとレイアウトを最適にレンダリングする列の数をすばやく設定します。通常の.col-*クラスは個々の列 (例: ) に適用されますが、行列のクラスは含まれる列のデフォルトとして.col-md-4親に設定されます。列に自然な幅を与えることができます.row。.row-cols-auto

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

桁
桁
桁
桁 
<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>
桁
桁
桁
桁 
<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>
桁
桁
桁
桁 
<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>
桁
桁
桁
桁 
<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>
桁
桁
桁
桁 
<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>
桁
桁
桁
桁 
<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>
桁
桁
桁
桁
桁
桁
桁
桁
桁
桁
桁
桁 
<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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 
<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>

サス

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

変数

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

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

ミックスイン

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

// Get fancy by offsetting, or changing the sort order
@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);
  }
}
メインコンテンツ
二次コンテンツ 
<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-columns: 12 !default;
$grid-gutter-width: 1.5rem !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、またはではなく)にグリッド値を設定してください%。