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

CSSグリッド(CSS Grid) v5.1.0新設

実例とコードスニペットを使用して、CSSグリッド上に構築された代替レイアウトシステムを有効化、使用、カスタマイズする方法を学習する。

※参考

Bootstrapのデフォルトのグリッドシステムは、何百万人もの人々によって試され、10年以上テストされたCSSレイアウト技術の集大成を表している。ただし、新しいCSSグリッドなどのブラウザで見られる最新のCSS機能や手法の多くを使用せずに作成されたものでもある。

 

使い方(How it works)

Bootstrap5では、CSSグリッド上に構築されているが、Bootstrapのひねりを加えた個別のグリッドシステムを有効にするオプションが追加された。レスポンシブレイアウトを構築するために気まぐれに適用できるクラスを引き続き取得するが、内部では異なるアプローチを使用。

  • CSSグリッドはオプトイン(同意方式)。scss/_variables.scss ファイル内の $enable-grid-classes: false を設定してデフォルトのグリッドシステムを無効にし、$enable-cssgrid: true を設定してCSSグリッドを有効にする。それからSassを再コンパイルする。
    .container(-*), .row, .row-cols(-{breakpoint})-*, .col(-{breakpoint})(-*), .offset(-{breakpoint})-*, .g({x|y})(-{breakpoint})-* に代わって、.grid, .g-col(-{breakpoint})-*, .g-start(-{breakpoint})-* が生成される。
  • .row のインスタンスを .grid に置き換える。.grid クラスは display: grid を設定し、HTMLで構築する grid-template を作成。
  • .col-* クラスを .g-col-* クラスに置き換える。これは、CSSグリッド列が width ではなく grid-column プロパティを使用しているため。
  • 列とガターのサイズはCSS変数を経由して設定される。これらを親の .grid に設定し、インラインかスタイルシートで、 --bs-columns--bs-gap を使用して必要に応じてカスタマイズする。

Flexboxの gap プロパティがほぼ完全なブラウザのサポートを達成したため、将来的にはBootstrapはハイブリッドソリューションに移行する可能性がある。

 

主な違い(Key differences)

デフォルトのグリッドシステムとの比較:

  • Flexユーティリティは、CSSグリッド列に同じように影響を与えない。
  • グリッドアイテムの間隔は、ギャップがガターに取って代わる。gap プロパティは、デフォルトのグリッドシステムの水平方向の padding を置き換え、margin のように機能。
  • そのため、.row とは異なり、.grid にはマイナスのマージンがなく、マージンユーティリティを使用してグリッドのガターを変更することはできない。グリッドのギャップは、デフォルトで水平方向と垂直方向に適用される。詳細は、カスタマイズの項目に記載。
  • インラインスタイルとカスタムスタイルは、修飾子クラスの代わりと見なす必要がある(例:style="--bs-columns: 3;"class="row-cols-3")。
  • 入れ子も同様に機能するが、入れ子になった .grid の各インスタンスで列数をリセットする必要がある場合がある。詳細は入れ子の項目に記載。
CSSグリッドを有効にした場合 見やすいよう枠と色を付けています
1列目
2列目
3列目
4列目
設定例 緑背景が変更箇所
<div class="grid">
  <div class="g-col-6">1列目</div>
  <div class="g-col-6">2列目</div>
  <div class="g-col-6">3列目</div>
  <div class="g-col-6">4列目</div>
</div>
デフォルトのグリッドシステムを使用した場合 見やすいよう枠と色を付けています
1列目
2列目
3列目
4列目
設定例 赤背景が変更箇所
<div class="row">
  <div class="col-6">1列目</div>
  <div class="col-6">2列目</div>
  <div class="col-6">3列目</div>
  <div class="col-6">4列目</div>
</div>
更にガタークラスを追加した場合 見やすいよう枠と色を付けています
1列目
2列目
3列目
4列目
設定例 赤背景が変更箇所
<div class="row g-4">
  <div class="col-6">1列目</div>
  <div class="col-6">2列目</div>
  <div class="col-6">3列目</div>
  <div class="col-6">4列目</div>
</div>

 

実例(Examples)

3列(Three columns)

.g-col-4 クラスを使用して、すべてのビューポートとデバイスにまたがる3つの等しい幅の列が作成できる。レスポンシブクラスを追加すれば、ビューポートサイズでレイアウトを変更できる。

均等に3分割列の表示 見やすいよう枠と色を付けています
.g-col-4
.g-col-4
.g-col-4
設定例
<div class="grid">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>
【設定】
  • .grid > .g-col-*(必要な数だけ入れる)

レスポンシブ(Responsive)

レスポンシブクラスを使用して、ビューポート全体のレイアウトを調整。ここでは、極小ビューポートの2つの列から始めて、中程度のビューポート以上ではの3つの列に拡大。

極小/小サイズでは均等に2分割列、中サイズ以上では均等に3分割列の表示 見やすいよう枠と色を付けています
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
設定例
<div class="grid">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

これを、すべてのビューポートで2列のレイアウトと比較。

均等に2分割列の表示 見やすいよう枠と色を付けています
.g-col-6
.g-col-6
設定例
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>
【設定】
  • .grid > .g-col(-{breakpoint})-*(必要な数だけ入れる)
  • .g-col(-{breakpoint})-* は、以下の「CSSグリッド有効後のクラスの種類」から選択(* は1行につき合計が12になるように指定)
CSSグリッド有効後のクラスの種類(* は1~12の整数
デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

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

.g-col(-{breakpoint})-** は、

  • 1 は、その列に grid-column: auto/span 1(1列分のサイズ)を設定
  • 2 は、その列に grid-column: auto/span 2(2列分のサイズ)を設定
  • 3 は、その列に grid-column: auto/span 3(3列分のサイズ)を設定
  • 4 は、その列に grid-column: auto/span 4(4列分のサイズ)を設定
  • 5 は、その列に grid-column: auto/span 5(5列分のサイズ)を設定
  • 6 は、その列に grid-column: auto/span 6(6列分のサイズ)を設定
  • 7 は、その列に grid-column: auto/span 7(7列分のサイズ)を設定
  • 8 は、その列に grid-column: auto/span 8(8列分のサイズ)を設定
  • 9 は、その列に grid-column: auto/span 9(9列分のサイズ)を設定
  • 10 は、その列に grid-column: auto/span 10(10列分のサイズ)を設定
  • 11 は、その列に grid-column: auto/span 11(11列分のサイズ)を設定
  • 12 は、その列に grid-column: auto/span 12(12列分のサイズ)を設定

する。

 

ラッピング(Wrapping)

水平方向にスペースがなくなると、グリッドアイテムは自動的に次の行に折り返される。gap(ギャップ、アイテムの間隔)はグリッドアイテム間の水平方向と垂直方向のギャップに適用されるので注意。

6列分のサイズで4列の表示 見やすいよう枠と色を付けています
.g-col-6
.g-col-6
.g-col-6
.g-col-6
設定例
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

 

スタート(Starts)

スタートクラスは、デフォルトのグリッドシステムのオフセットクラスと置き換えることを目的としているが、完全に同じではない。CSSグリッドは、ブラウザに"この列で開始"と"この列で終了"を指示するスタイルを使用してグリッドテンプレートを作成。これらのプロパティは、grid-column-startgrid-column-end である。スタートクラスは前者の省略形で、それらを列クラスと組み合わせて、必要に応じて列のサイズと位置を調整。0 はこれらのプロパティの無効な値であるため、スタートクラスは 1 から始まる。

2列目から3列分のサイズと6列目から4列分のサイズの表示 見やすいよう枠と色を付けています
.g-col-3 .g-start-2
.g-col-4 .g-start-6
設定例
<div class="grid">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>
【設定】
  • .grid > .g-col(-{breakpoint})-*.g-start(-{breakpoint})-*(必要な数だけ入れる)
  • .g-start(-{breakpoint})-* は、以下の「CSSグリッド有効後のクラスの種類」から選択
CSSグリッド有効後のクラスの種類(*は1~12の整数
デバイスの幅 極小
縦モバイルサイズ
<576px

横モバイルサイズ
≥576px

タブレットサイズ
≥768px

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

.g-start(-{breakpoint})-** の設定は、

  • 1 は、その列に grid-column-start: 1(1列目から表示開始)を設定
  • 2 は、その列に grid-column-start: 2(2列目から表示開始)を設定
  • 3 は、その列に grid-column-start: 3(3列目から表示開始)を設定
  • 4 は、その列に grid-column-start: 4(4列目から表示開始)を設定
  • 5 は、その列に grid-column-start: 5(5列目から表示開始)を設定
  • 6 は、その列に grid-column-start: 6(6列目から表示開始)を設定
  • 7 は、その列に grid-column-start: 7(7列目から表示開始)を設定
  • 8 は、その列に grid-column-start: 8(8列目から表示開始)を設定
  • 9 は、その列に grid-column-start: 9(9列目から表示開始)を設定
  • 10 は、その列に grid-column-start: 10(10列目から表示開始)を設定
  • 11 は、その列に grid-column-start: 11(11列目から表示開始)を設定
  • 12 は、その列に grid-column-start: 12(12列目から表示開始)を設定

となる。

 

自動サイズ列(Auto columns)

グリッドアイテム(.grid の直接の子)にクラスがない場合、各グリッドアイテムは自動的に1列にサイズ変更される。

1.1列分のサイズで12列の表示 見やすいよう枠と色を付けています
1
1
1
1
1
1
1
1
1
1
1
1
設定例
<div class="grid">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

この動作は、グリッド列クラスと組み合わせられる。

2.6列分のサイズで1列と1列分のサイズで6列の表示 見やすいよう枠と色を付けています
.g-col-6
1
1
1
1
1
1
設定例
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>
【設定】
  • .grid の子要素に .g-col(-{breakpoint})-* がない場合は、その列は自動サイズで表示

 

入れ子(Nesting)

デフォルトのグリッドシステムと同様に、CSSグリッドを使用すると .grid を簡単に入れ子にできる。ただし、デフォルトとは異なり、このグリッドは行、列、ギャップの変更を継承する。以下の実例で確認すること。

  • デフォルトの列数をローカルCSS変数 --bs-columns:3 で再定義する。
  • 1番目の自動サイズ列では、列数が継承され、各列は使用可能な幅の3分の1になる。
  • 2番目の自動サイズ列では、入れ子になった .grid の列数を12(デフォルト)にリセットする。
  • 3番目の自動サイズ列には、入れ子になったコンテンツはなし。

実際には、これにより、デフォルトのグリッドシステムと比較して、より複雑にカスタマイズされたレイアウトが可能になる。

3分割列内に入れ子で列を入れる 見やすいよう枠と色を付けています
1番目の自動サイズ列
自動サイズ列
自動サイズ列
2番目の自動サイズ列
12分の6
12分の4
12分の2
3番目の自動サイズ列
設定例
<div class="grid" style="--bs-columns: 3;">
  <div>
    1番目の自動サイズ列
    <div class="grid">
      <div>自動サイズ列</div>
      <div>自動サイズ列</div>
    </div>
  </div>
  <div>
    2番目の自動サイズ列
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">12分の6</div>
      <div class="g-col-4">12分の4</div>
      <div class="g-col-2">12分の2</div>
    </div>
  </div>
  <div>3番目の自動サイズ列</div>
</div>
【設定】
  • .grid > .grid の入れ子にする

 

カスタマイズ(Customizing)

ローカルCSS変数を使用して、列数、行数、ギャップの幅をカスタマイズ。

変数 フォールバック値 説明
--bs-rows 1 グリッドテンプレートの行数
--bs-columns 12 グリッドテンプレートの列数
--bs-gap 1.5rem 列間のギャップのサイズ(垂直と水平)

これらのCSS変数にはデフォルト値がない。代わりに、ローカルインスタンスが提供されるまで使用されるフォールバック値を適用。例えば、CSSグリッド行に var(--bs-rows, 1) を使用しても、まだどこにも設定されていないため、--bs-rows は無視される。一度そうなると、.grid インスタンスは 1 のフォールバック値の代わりにその値を使用する。

グリッドクラスなし(No grid classes)

.grid の直接の子要素はグリッドアイテムであるため、 .g-col クラスを明示的に追加せずにサイズ変更される。

自動サイズで3列表示 見やすいよう枠と色を付けています
自動サイズ列
自動サイズ列
自動サイズ列

※カスタマイズなし

自動サイズ列
自動サイズ列
自動サイズ列
設定例
<div class="grid" style="--bs-columns: 3;">
  <div>自動サイズ列</div>
  <div>自動サイズ列</div>
  <div>自動サイズ列</div>
</div>

列数とギャップ(Columns and gaps)

列数とギャップを調整する。

1.全体を4列にし、2列分のサイズで2列の表示(ギャップサイズは5remに)見やすいよう枠と色を付けています
.g-col-2
.g-col-2

※カスタマイズなし

.g-col-2
.g-col-2
設定例
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>
2.全体を10列にし、6:4で2列の表示(ギャップサイズは1remに)見やすいよう枠と色を付けています
.g-col-6
.g-col-4

※カスタマイズなし

.g-col-6
.g-col-4
設定例
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

行の追加(Adding rows)

行の追加と列の配置の変更:

全体を3行3列にして、各行1列ずつズラして表示 見やすいよう枠と色を付けています
自動サイズ列
自動サイズ列
自動サイズ列

※カスタマイズなし

自動サイズ列
自動サイズ列
自動サイズ列
設定例
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>自動サイズ列</div>
  <div class="g-start-2" style="grid-row: 2">自動サイズ列</div>
  <div class="g-start-3" style="grid-row: 3">自動サイズ列</div>
</div>

ギャップ(Gaps)

row-gap を変更するだけで、垂直方向のギャップを変更できる。 .gridgap を使用するが、row-gapcolumn-gap は必要に応じて変更できるので注意。

1.上下のギャップを0にする 見やすいよう枠と色を付けています
.g-col-6
.g-col-6
.g-col-6
.g-col-6

※カスタマイズなし:ラッピングの6列分のサイズで4列の表示と同じ。

設定例
<div class="grid" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

そのため、垂直方向と水平方向に異なる gapを設定できる。ギャップは、単一の値(すべての辺)か値のペア(垂直方向と水平方向)を取ることができる。これは、gap のインラインスタイルか、--bs-gap CSS変数を使用して適用できる。

2.上下は0.25rem、左右は1remのギャップにする 見やすいよう枠と色を付けています
.g-col-6
.g-col-6
.g-col-6
.g-col-6

※カスタマイズなし:ラッピングの6列分のサイズで4列の表示と同じ。

設定例
<div class="grid" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>
【設定】

以下の変数を任意のスタイルに追加

  • 行数の設定:--bs-rows
  • 列数の設定:--bs-columns
  • ギャップサイズの設定
    • 上下:row-gap
    • 左右:column-gap
    • 上下左右:--bs-gap

 

Sass

CSSグリッドの制限の1つは、デフォルトのクラスが2つのSass変数 $grid-columns$grid-gutter-width によって生成される。これにより、コンパイルされたCSSで生成されるクラスの数が効果的に事前に決定される。これには2つのオプションがある。

  • これらのデフォルトのSass変数を変更し、CSSを再コンパイル。
  • インラインやカスタムスタイルを使用して、提供されたクラスを拡張。
全体を18列にして、14:4で表示 見やすいよう枠と色を付けています
14列
.g-col-4

※カスタマイズなし

14列
.g-col-4
設定例
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14列</div>
  <div class="g-col-4">.g-col-4</div>
</div>