メインコンテンツへスキップ

グリッド(Grid system)

12の列システム、6つのデフォルトレスポンス層、Sass変数とmixin、数十の定義済みクラスにより、強力なモバイル・ファーストのFlexboxグリッドを使用して、すべての形状とサイズのレイアウトを構築する。

実例(Example)

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

見本 見やすいよう色を付けています
3つの列の1列目
3つの列の2列目
3つの列の3列目
設定例
<div class="container">
	<div class="row">
		<div class="col-sm">
			3つの列の1列目
		</div>
		<div class="col-sm">
			3つの列の2列目
		</div>
		<div class="col-sm">
			3つの列の3列目
		</div>
	</div>
</div>

上記の実例では、定義済みのグリッドクラスを使用して、小、中、大、特大、超特大型デバイスで3つの等幅列を作成している。それらの列は親要素の .container を持つページの中央に配置される。

【設定】
  • div.containerdiv.container-fluiddiv.container-{breakpoint}) > .row > .col(-{breakpoint})(必要な数だけ入れる)
  • グリッド全体の幅をレスポンシブに固定したい場合はデフォルトのコンテナ、幅全体に広がるようにしたい場合は全幅のコンテナ、ブレークポイントよって固定幅か全幅を変更する場合はレスポンシブ・コンテナを使用
  • .col(-{breakpoint})-*は、以下の「定義済みクラスの種類」から選択(* は1行につき合計が12になるように指定(12を超える場合は列の折り返しを参照))

 

使い方(How it works)

分解してグリッドシステムがどのように統合されるかを以下に示す:

  • Bootstrapのグリッドは、6つのレスポンシブ・ブレークポイントをサポート。ブレークポイントは最小幅のメディアクエリに基づく。つまり、そのブレークポイントとそれより上のすべてのブレークポイントに影響する(例えば .col-sm-4sm,md, lg, xl, xxl で適用)。これにより各ブレークポイントによってコンテナと列のサイズと動作が制御可能。
  • コンテナはコンテンツを中央に配置し、水平方向に空白を設ける。レスポンシブ・ピクセル幅の場合は .container、すべてのビューポートでデバイス全体が width: 100% の場合は .container-fluid、両方を組み合わせたレスポンシブ・コンテナ(例えば .container-md)を使用。
  • 行(row、ロー)で列(column、カラム)を囲む。各列には、それらの間の余白を制御するための水平方向の padding(gutter、ガターと呼ぶ)がある。次に、この padding が負のマージンを持つ行で打ち消され、列のコンテンツが視覚的に行頭側に揃えられる。行は、列のサイズ変更を均一に適用する行列クラスガタークラスもサポートして、コンテンツの間隔を変更する。
  • 列は非常に柔軟な存在。行ごとに12のテンプレート列を使用できるため、任意の数の列にまたがる要素のさまざまな組み合わせが作成可能。列クラスは、またがるテンプレート列の数を示す(例えば col-4 は4列にまたがる)。width はパーセンテージで設定されるため、常に同じ相対的なサイズになる。
  • ガターもレスポンシブ性が高くカスタマイズ可能。ガタークラスは、すべてのブレークポイントで利用可能で、サイズはマージンとパディングの間隔と同じである。.gx-* クラスは水平方向のガター、.gy-* は垂直方向のガター、.g-* クラスは両方向のガターを変更する。.g-0 でガターを削除可能。
  • Sass変数、マップ、mixinがグリッドに力を与える。Bootstrapで定義済みのグリッドクラスを使用しない場合は、グリッドのソースSassを使用して、よりセマンティックなマークアップを備えた独自のクラスが作成可能。これらのSass変数を使用するためのCSSカスタムプロパティもいくつか含まれており、柔軟性がさらに高まる。

FlexboxのいくつかのHTML要素を使用できないなど、Flexboxに関する制限やバグに注意すること。

 

グリッド・オプション(Grid options)

Bootstrapのグリッドシステムは、6つのデフォルトブレークポイントすべてと、カスタマイズしたブレークポイント全体に適応可能。6つのデフォルトのグリッド層は以下のとおり:

  • 極小 (xs)
  • 小 (sm)
  • 中 (md)
  • 大 (lg)
  • 特大 (xl)
  • 超特大 (xxl) v5.0.0-alpha1追加

上記のように、これらの各ブレークポイントには、独自のコンテナ、一意のクラスの接頭辞、修飾子がある。これらのブレークポイントでグリッドがどのように変化するかを以下に示す:

デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

デスクトップサイズ
≥992px
特大
大画面サイズ
≥1200px
超特大
ワイド画面サイズ
≥1400px
コンテナの max-width なし(自動) 540px 720px 960px 1140px 1320px
クラス名 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
v5.0.0-alpha1追加
列の数 12
ガター(列の間隔)の幅 1.5rem(それぞれの端に.75remずつ)v5.0.0-alpha1変更
ガターのカスタマイズ 可能
入れ子 可能
順序変更 可能
【変更履歴】
  • 【v5.0.0-alpha1】
    • 超特大(xxl)のブレークポイントが追加
    • ガターの幅:30px(それぞれの端に15pxずつ)⇒1.5rem(それぞれの端に0.75remずつ)
定義済みクラスの種類(* は1~12の整数と auto
デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

デスクトップサイズ
≥992px
特大
大画面サイズ
≥1200px
超特大
ワイド画面サイズ
≥1400px
全サイズで適用 .col(-*)
576px以上で適用 .col-sm(-*)
768px以上で適用 .col-md(-*)
992px以上で適用 .col-lg(-*)
1200px以上で適用 .col-xl(-*)
1400px以上で適用 .col-xxl(-*)
v5.0.0-alpha1追加

 

列の自動レイアウト(Auto-layout columns)

.col-sm-6 のような明示的に番号を付けられたクラスがなければ、簡単な列サイズ設定のためにブレークポイント固有の列クラスを利用する。

等幅(Equal-width)

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

見本 見やすいよう色を付けています

●2分割列と3分割列を同時に表示

2つの列の1列目
2つの列の2列目
3つの列の1列目
3つの列の2列目
3つの列の3列目
設定例
<div class="container">
	<!-- 2分割列の設定 -->
	<div class="row">
		<div class="col">
			2つの列の1列目
		</div>
		<div class="col">
			2つの列の2列目
		</div>
	</div>
	<!-- 3分割列の設定 -->
	<div class="row">
		<div class="col">
			3つの列の1列目
		</div>
		<div class="col">
			3つの列の2列目
		</div>
		<div class="col">
			3つの列の3列目
		</div>
	</div>
</div>
【設定】
  • .row > .col(-{breakpoint}) + .col(-{breakpoint})...

1列の幅の設定(Setting one column width)

Flexboxグリッド列の自動レイアウトはまた、ある1列の幅を設定できることを意味し、その列の周りに自動的に兄弟列のサイズが変更可能。定義済みのグリッドクラス(以下に示す)、グリッドmixin、インライン幅が使用可能。他の列は、中央の列の幅に関係なくサイズが変更される。

見本 見やすいよう色を付けています

●1つだけ列を広めに固定

3つの列の1列目
3つの列の2列目 (広め)
3つの列の3列目
3つの列の1列目
3つの列の2列目 (広め)
3つの列の3列目
設定例
<div class="container">
	<div class="row">
		<div class="col">
			3つの列の1列目
		</div>
		<div class="col-6">
			3つの列の2列目 (広め)
		</div>
		<div class="col">
			3つの列の3列目
		</div>
	</div>
	<div class="row">
		<div class="col">
			 3つの列の1列目
		</div>
		<div class="col-5">
			3つの列の2列目 (広め)
		</div>
		<div class="col">
			3つの列の3列目
		</div>
	</div>
</div>
【設定】
  • 広めにしたい列の .col.col-* にする(3分割列の場合は 5 以上にする)

可変幅コンテンツ(Variable width content)

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

見本 見やすいよう色を付けています
3つの列の1列目
可変幅コンテンツ
3つの列の3列目
3つの列の1列目
可変幅コンテンツ
3つの列の3列目
設定例
<div class="container">
	<div class="row justify-content-md-center">
		<div class="col col-lg-2">
			3つの列の1列目
		</div>
		<div class="col-md-auto">
			可変幅コンテンツ
		</div>
		<div class="col col-lg-2">
			3つの列の3列目
		</div>
	</div>
	<div class="row">
		<div class="col">
			3つの列の1列目
		</div>
		<div class="col-md-auto">
			可変幅コンテンツ
		</div>
		<div class="col col-lg-2">
			3つの列の3列目
		</div>
	</div>
</div>
【設定】
  • .col(-{breakpoint}) の部分を col(-{breakpoint})-auto にする
【変更履歴】
  • 【v5.0.0-alpha1】
    • v4の「複数行の等幅」の解説は削除(「行列グリッド」で対応可)

 

レスポンシブ・クラス(Responsive classes)

Bootstrapのグリッドには、複雑なレスポンシブ・レイアウトを構築するための6つの階層が定義されている。極小、小、中、大、特大、超特大規模のデバイスで、列のサイズをカスタマイズすることが可能。

全てのブレークポイント(All breakpoints)

デバイスの最小サイズから最大サイズまで同じグリッドの場合は、.col.col-* クラスを使用。特定のサイズの列が必要な場合は、番号付きクラスを指定。それ以外の場合は、.col を固辞すること。

見本 見やすいよう色を付けています

●4列で表示

1列目: col
2列目: col
3列目: col
4列目: col

●2:1で表示

1列目: col-8
2列目: col-4
設定例
4列で表示<div class="container">
	<div class="row">
		<div class="col">1列目...</div>
		<div class="col">2列目...</div>
		<div class="col">3列目...</div>
		<div class="col">4列目...</div>
	</div>
</div>
2:1で表示<div class="container">
	<div class="row">
		<div class="col-8">1列目...</div>
		<div class="col-4">2列目...</div>
	</div>
</div>

モバイルでは縦積み(Stacked to horizontal)

.col-sm-* クラスを使用すると、小(sm)以上のブレークポイントでは横並びに表示、モバイルデバイス(極小)では縦積みに表示される基本的なグリッドシステムが作成可能。

見本 見やすいよう色を付けています

●2:1で表示

1列目: .col-sm-8
2列目: .col-sm-4

●1:1:1で表示

1列目: .col-sm
2列目: .col-sm
3列目: .col-sm
設定例
2:1で表示<div class="container">
	<div class="row">
		<div class="col-sm-8">1列目: .col-sm-8</div>
		<div class="col-sm-4">2列目: .col-sm-4</div>
	</div>
</div>
1:1:1で表示<div class="container">
	<div class="row">
		<div class="col-sm">1列目: .col-sm</div>
		<div class="col-sm">2列目: .col-sm</div>
		<div class="col-sm">3列目: .col-sm</div>
	</div>
</div>

ミックス&マッチ(Mix and match)

列を単純にいくつかのグリッド階層で縦積みにしたいなら、必要に応じて、各階層に異なるクラスの組み合わせを使用。すべての動作でより良く見える方法については、以下の実例に記載。

見本 見やすいよう色を付けています

●極小/小サイズでは列を縦積みに表示、中サイズ以上では2:1で表示

1列目: .col-md-8
2列目: .col-6 .col-md-4

●極小/小サイズでは1:1+縦積みに表示、中サイズ以上では1:1:1で表示

1列目: .col-6 .col-md-4
2列目: .col-6 .col-md-4
3列目: .col-6 .col-md-4

●常に1:1で表示

1列目: .col-6
2列目: .col-6
設定例
極小/小サイズでは列を縦積みに表示、中サイズ以上では2:1で表示<div class="container">
	<div class="row">
		<div class="col-md-8">1列目: .col-md-8</div>
		<div class="col-6 col-md-4">2列目: .col-6 .col-md-4</div>
	</div>
</div>
極小/小サイズでは1:1+縦積みに表示、中サイズ以上では1:1:1で表示<div class="container">
	<div class="row">
		<div class="col-6 col-md-4">1列目: .col-6 .col-md-4</div>
		<div class="col-6 col-md-4">2列目: .col-6 .col-md-4</div>
		<div class="col-6 col-md-4">3列目: .col-6 .col-md-4</div>
	</div>
</div>
常に1:1で表示<div class="container">
	<div class="row">
		<div class="col-6">1列目: .col-6</div>
		<div class="col-6">2列目: .col-6</div>
	</div>
</div>

行列グリッド(Row columns)

レスポンシブ .row-cols-* クラスを使用して、コンテンツとレイアウトを最も適切に表示する1行の列数(1~6)を迅速に設定。通常の .col-* クラス(.col-md-4 など)は個々の列に適用されるが、行列グリッドクラスは手っ取り早く親要素の .row に設定する。.row-cols-auto を使用すれば列に自然な幅が設定される。

これらの行列グリッドクラスを使用すると、すばやい基本的なグリッドレイアウトの作成やカードのレイアウト制御が可能。

1. 1行に2列で設定

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
<div class="container">
	<div class="row row-cols-2">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

2. 1行に3列で設定

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
<div class="container">
	<div class="row row-cols-3">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

3. 1行に4列で設定(幅の大きさは自動)v5.0.0-alpha1追加

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
<div class="container">
	<div class="row row-cols-auto">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

4. 1行に4列で設定(幅の大きさは均等)

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
<div class="container">
	<div class="row row-cols-4">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

5. 列の幅が均等ではない場合

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
<div class="container">
	<div class="row row-cols-4">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col-6">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

6. ビューポートに応じて列数が変化

モバイルでは1列4行だが、ビューポート小以上では2列2行、さらにビューポート中以上で4列1行となる。

見本 見やすいよう色を付けています
1列目
2列目
3列目
4列目
設定例
<div class="container">
	<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
		<div class="col">1列目</div>
		<div class="col">2列目</div>
		<div class="col">3列目</div>
		<div class="col">4列目</div>
	</div>
</div>

付属のSass mixin、row-cols() も使用可能。

設定例
custom.scss.element {
  // 最初は3列
  @include row-cols(3);

  // 中ブレークポイントからは5列
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}
【設定】
  • .row.row-cols(-{breakpoint})-* > .col
    .row-cols(-{breakpoint})-* は以下の「定義済みクラスの種類」から選択
【変更履歴】
  • 【v5.0.0-alpha1】
    • .row-cols(-{breakpoint})-auto, .row-cols-xxl-* が追加
定義済みクラスの種類(* は1~6の整数と auto
デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

デスクトップサイズ
≥992px
特大
大画面サイズ
≥1200px
超特大
ワイド画面サイズ
≥1400px
全サイズで適用 .row-cols-*
576px以上で適用 .row-cols-sm-*
768px以上で適用 .row-cols-md-*
992px以上で適用 .row-cols-lg-*
1200px以上で適用 .row-cols-xl-*
1400px以上で適用 .row-cols-xxl-*
v5.0.0-alpha1追加

.row-cols(-{breakpoint})-** の設定は、

  • 1 は、各列を width: 100% に設定
  • 2 は、各列を width: 50% に設定
  • 3 は、各列を width: 33.333333% に設定
  • 4 は、各列を width: 25% に設定
  • 5 は、各列を width: 20% に設定
  • 6 は、各列を width: 16.666667% に設定
  • auto は、各列を width: auto に設定

となる。

 

入れ子(Nesting)

既定のグリッドでコンテンツを入れ子(ある要素を別の要素の中に入れること)にするには、既存の .col-sm-* の列内に新しい .row.col-sm-* の列のセットを追加する。入れ子になった行には、最大12サイズ以内の列を含む必要がある(12サイズの列をすべて使用する必要はない)。

見本 見やすいよう色を付けています
親の1列目: .col-sm-3
子の1列目: .col-8 .col-sm-6
子の2列目: .col-4 .col-sm-6
設定例
<div class="container">
	<div class="row">
		<div class="col-sm-3">
			親の1列目: .col-sm-3
		</div>
		<div class="col-sm-9"><!-- 親の2列目 -->
			<div class="row">
				<div class="col-8 col-sm-6">
					子の1列目: .col-8 .col-sm-6
				</div>
				<div class="col-4 col-sm-6">
					子の2列目: .col-4 .col-sm-6
				</div>
			</div>
		</div>
	</div>
</div>
【設定】
  • div.row > div.row の入れ子にする

 

Sass

BootstrapのソースSassファイルを使用するときは、Sass変数とmixinを使用して、カスタムで、セマンティックで、レスポンシブなページレイアウトが作成可能。定義済みのグリッドクラスは、これらの同じ変数とmixinを使用して、迅速にレスポンシブ・レイアウトに対応したすぐに使えるクラスを提供する。

変数(Variables)

変数とマップは、列の数、ガターの幅、列の移動を開始するメディアクエリポイントを決定。これらを使用して下記の定義済みのグリッドクラスとカスタムmixinを生成。

設定例
scss/_variables.scss 内$grid-columns:      12;
$grid-gutter-width: 1.5rem;
デフォルトの設定
scss/_variables.scss 内 grid-breakpoints の設定$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1400px
);
scss/_variables.scss 内 container-max-widths の設定$container-max-widths: (
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1140px,
	xxl: 1320px
);

mixin(Mixins)v5.0.0変更

mixinは、グリッド変数とともに使用され、個々のグリッド列に対してセマンティックなCSSを生成する。

設定例
custom.scss// 一連の列の囲みを作成
@include make-row();

// 要素をグリッド対応に作成(幅以外のすべてを適用)
@include make-col-ready();

// オプションのサイズ値がない場合、mixinは等列を作成(.colの使用と同様)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// 空白列、順序変更
@include make-col-offset($size, $columns: $grid-columns);
【変更履歴】
  • 【v5.0.0】
    • @include make-col(); を追加

使用例(Example usage)

Sass変数やマップを変更する場合は、変更を保存して再コンパイルする必要がある。そうすることで、列の幅、オフセット、順序付けのための定義済みグリッドクラスの新しいセットが用意される。また、任意のブレークポイントを使用するようにレスポンシブな可視性ユーティリティも更新される。

設定例
custom.scss.example-container {
	@include make-container();
	// mixinの後にこの幅を定義して、`make-container()`によって生成された`width: 100%`を上書き
	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">メインコンテンツ</div>
		<div class="example-content-secondary">サブコンテンツ</div>
	</div>
</div>
上記設定での表示 見やすいよう色と枠を付けています
メインコンテンツ
サブコンテンツ

 

グリッドのカスタマイズ(Customizing the grid)

組み込まれているグリッドSass変数とマップを使用して、定義済みのグリッドクラスを完全にカスタマイズすることが可能。階層の数、メディアクエリの寸法やコンテナの幅を変更して再コンパイルする。

列とガター(Columns and gutters)

グリッド列の数はSass変数で変更可能。$grid-columns は、個々の列の幅(パーセント)を生成するために、$grid-gutter-width は、ガター(グリッド列の間隔)の幅を設定するために使用。

デフォルトの設定
scss/_variables.scss 内$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

グリッド階層(Grid tiers)

列そのものを超えて移動できるようにグリッド階層の数をカスタマイズすることも可能。4グリッド階層だけが必要なら、$grid-breakpoints$container-max-widths を次のように更新:

設定例
custom.scss$grid-breakpoints: (
	xs: 0,
	sm: 480px,
	md: 768px,
	lg: 1024px
);

$container-max-widths: (
	sm: 420px,
	md: 720px,
	lg: 960px
);

Sassの変数やマップを変更するときは、変更を保存して再コンパイルする必要がある。そうすることで列の幅と順序の定義済みのグリッドクラスの新しいセットが出力される。またカスタムブレークポイントを使用するようにレスポンシブの表示ユーティリティも更新される。グリッド値はpxrem, em, % ではなく)で設定すること。