CSSグリッド

Bootstrapのデフォルトのグリッドシステムは、10年以上にわたるCSSレイアウトテクニックの集大成です。しかし、新しいCSSグリッドのような、ブラウザで見られるようになったモダンなCSSの機能やテクニックの多くがない状態で作成されました。

仕組み

Bootstrap 5では、CSS GridをベースにBootstrapのひねりを加えた、独立したグリッドシステムを有効にするオプションが追加されました。レスポンシブなレイアウトを構築するために、思いつきで適用できるクラスはそのままですが、ボンネットの下では異なるアプローチを採用しています。

• CSS Gridはオプトイン方式です。 $enable-grid-classes: falseを設定してデフォルトのグリッドシステムを無効にし、$enable-cssgrid: trueを設定してCSSグリッドを有効にします。その後、Sassを再コンパイルします。

• .rowのインスタンスを.gridに置き換える。 .gridクラスはdisplay: gridを設定し、grid-templateを作成します。

• .col-*クラスを.g-col-*クラスに置き換える これは、CSS Gridのカラムがwidthの代わりにgrid-columnプロパティを使用しているためです。

• カラムとガターのサイズはCSS変数で設定する。 親である.gridにこれらを設定し、インラインまたはスタイルシートで--bs-columnsと--bs-gapを使って好きなようにカスタマイズします。

将来的には、gapプロパティがフレックスボックスをほぼ完全にブラウザでサポートするようになったため、Bootstrapはハイブリッドソリューションに移行することになるでしょう。

主な相違点

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

• フレックス・ユーティリティは、CSSグリッドのカラムには同じように影響しない。

• ギャップはガターに代わるものです。gapプロパティはデフォルトのグリッドシステムの水平方向のpaddingを置き換え、よりmarginに近い働きをします。

• そのため、.rowとは異なり、.gridは負のマージンを持ちません。また、マージンユーティリティを使用してグリッドのガターを変更することはできません。グリッドの隙間はデフォルトで水平方向と垂直方向に適用されます。詳細はカスタマイズセクションを参照してください。

• インライン・スタイルとカスタム・スタイルは、モディファイア・クラスの代わりと考えるべきです(例えば、style="--bs-columns: 3;" vs class="row-cols-3"のように)。

• ネストも同様に機能しますが、ネストされた.gridのインスタンスごとにカラム数をリセットする必要があるかもしれません。詳細はネスティングセクションを参照してください。

例

3列

.g-col-4クラスを使用すると、すべてのビューポートとデバイスで等幅の3列を作成できます。responsiveクラスを追加すると、ビューポートサイズによってレイアウトを変更できます。

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

レスポンシブ

レスポンシブ・クラスを使用して、ビューポート間でレイアウトを調整します。ここでは、最も狭いビューポートでは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列レイアウトと比較してみてください。

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

ラッピング

グリッドアイテムは水平方向にスペースがなくなると自動的に次の行に折り返されます。gapはグリッドアイテム間の水平方向と垂直方向の隙間に適用されることに注意してください。

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

開始

開始クラスは、デフォルトのグリッドのオフセットクラスを置き換えることを目的としていますが、完全に同じというわけではありません。CSS Gridは、“この列で開始"と"この列で終了"をブラウザに指示するスタイルを通してグリッドテンプレートを作成します。これらのプロパティはgrid-column-startとgrid-column-endです。開始クラスは前者の省略形です。カラムクラスと組み合わせることで、カラムのサイズや配置を自由に設定できます。開始クラスは1から始まります。

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

自動列

グリッドアイテム（.gridの直接の子）にクラスがない場合、各グリッドアイテムのサイズは自動的に1列になります。

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

この動作は、グリッド・カラム・クラスと混在させることができます。

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

ネスティング

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

• デフォルトの列数をローカルCSS変数で上書きする： --bs-columns： 3。
• 最初の自動カラムでは、カラム数は継承され、各カラムは利用可能な幅の3分の1になる。
• 2つ目のオートカラムでは、ネストされた.gridのカラム数を12（デフォルト）にリセットしています。
• 3つ目の自動カラムにはネストされたコンテンツがない。

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

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

カスタマイズ

ローカルCSS変数を使用して列数、行数、間隔幅をカスタマイズします。

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

グリッドクラスなし

.gridの直接の子要素はグリッド・アイテムなので、.g-colクラスを明示的に追加しなくてもサイズが調整されます。

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

カラムとガター

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

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

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

行の追加

行を増やしたり、列の配置を変えたりします。：

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

間隔

row-gapを修正することで縦方向の間隔を変更することができます。.gridにはgapを使いますが、row-gapとcolumn-gapは必要に応じて修正できます。

<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は単一の値（すべての辺）または2つの値（垂直方向と水平方向）を取ることができます。これはgapのインラインスタイルか、CSS変数--bs-gapを使って適用することができます。

<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 Gridの制限事項の1つは、デフォルトのクラスが2つのSass変数、$grid-columnsと$grid-gutter-widthによって生成されることです。これは、コンパイルされたCSSで生成されるクラスの数を効果的に事前決定してしまいます。ここで2つのオプションがあります：

• デフォルトのSass変数を変更し、CSSを再コンパイルします。
• 提供されたクラスを補強するために、インラインまたはカスタム・スタイルを使用します。

例えば、カラム数を増やして間隔サイズを変更し、インラインスタイルと定義済みのCSS Gridカラムクラス（例：.g-col-4）を組み合わせて「カラム」のサイズを設定することができます。

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