CSSグリッド（CSS Grid） v5.1.0新設

※参考

• グリッドレイアウトの基本概念（MDN日本語版）
• CSS Grid Layout を極める！（基礎編）（Qiita）
• 一番分かりやすいCSS Grid Layoutの使い方ガイド（Web Design Trends）

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グリッドを有効にした場合 見やすいよう色と枠を付けています

設定例 緑背景が変更箇所

<div class="grid text-center">
  <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>

デフォルトのグリッドシステムを使用した場合 見やすいよう色と枠を付けています

設定例 赤背景が変更箇所

<div class="row text-center">
  <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>

更にガタークラスを追加した場合 見やすいよう色と枠を付けています

設定例 赤背景が変更箇所

<div class="row g-4 text-center">
  <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分割列の表示 見やすいよう色と枠を付けています

設定例

<div class="grid text-center">
  <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>

レスポンシブ（Responsive）

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

極小/小サイズでは均等に2分割列、中サイズ以上では均等に3分割列の表示 見やすいよう色と枠を付けています

設定例

<div class="grid text-center">
  <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分割列の表示 見やすいよう色と枠を付けています

設定例

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

CSSグリッド有効後のクラスの種類（* は1～12の整数）

※.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列の表示 見やすいよう色と枠を付けています

設定例

<div class="grid text-center">
  <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-start と grid-column-end である。スタートクラスは前者の省略形で、それらを列クラスと組み合わせて、必要に応じて列のサイズと位置を調整。0 はこれらのプロパティの無効な値であるため、スタートクラスは 1 から始まる。

2列目から3列分のサイズと6列目から4列分のサイズの表示 見やすいよう色と枠を付けています

設定例

<div class="grid text-center">
  <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>

CSSグリッド有効後のクラスの種類（*は1～12の整数）

※.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列の表示 見やすいよう色と枠を付けています

設定例

<div class="grid text-center">
  <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列の表示 見やすいよう色と枠を付けています

設定例

<div class="grid text-center">
  <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>

入れ子（Nesting）

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

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

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

3分割列内に入れ子で列を入れる 見やすいよう色と枠を付けています

設定例

<div class="grid text-center" 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>

カスタマイズ（Customizing）

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

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

グリッドクラスなし（No grid classes）

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

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

設定例

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

列数とギャップ（Columns and gaps）

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

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

設定例

<div class="grid text-center" 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に）見やすいよう色と枠を付けています

設定例

<div class="grid text-center" 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 text-center" 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 を変更するだけで、垂直方向のギャップを変更できる。.grid で gap を使用するが、row-gap と column-gap は必要に応じて変更できるので注意。

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

設定例

<div class="grid text-center" 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のギャップにする 見やすいよう色と枠を付けています

設定例

<div class="grid text-center" 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>

Sass

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

• これらのデフォルトのSass変数を変更し、CSSを再コンパイル。
• インラインやカスタムスタイルを使用して、提供されたクラスを拡張。

全体を18列にして、14:4で表示 見やすいよう色と枠を付けています

設定例

<div class="grid text-center" 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>