CSS Grid

Bootstrapのデフォルトグリッドシステムは、10年以上にわたるCSSレイアウト技術の集大成であり、何百万人もの人々によって試され、テストされています。しかし、それはまた、新しいCSS Gridのようなブラウザで目にする多くの最新のCSS機能や技術なしに作成されました。

動作原理

Bootstrap 5では、CSS Grid上に構築された、しかしBootstrap独自の工夫が加えられた別のグリッドシステムを有効にするオプションを追加しました。依然として、レスポンシブなレイアウトを構築するために気まぐれに適用できるクラスを取得できますが、内部的なアプローチが異なります。

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

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

• `.col-*` クラスを `.g-col-*` クラスで置き換えます。これは、CSS Gridの列が`width`ではなく`grid-column`プロパティを使用するためです。

• 列とガターのサイズはCSS変数で設定されます。これらを親の`.grid`で設定し、`--bs-columns`と`--bs-gap`を使用して、インラインまたはスタイルシートで自由にカスタマイズできます。

将来的には、`gap`プロパティがフレックスボックスに対してほぼ完全なブラウザサポートを獲得しているため、Bootstrapはハイブリッドソリューションに移行する可能性があります。

主な違い

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

• フレックスユーティリティは、CSS Gridの列に同じように影響しません。

• ギャップはガターを置き換えます。`gap`プロパティは、デフォルトのグリッドシステムの水平方向の`padding`を置き換え、`margin`のように機能します。

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

• インラインスタイルとカスタムスタイルは、修飾子クラスの代替として考える必要があります（例：`style="--bs-columns: 3;"` 対 `class="row-cols-3"`）。

• ネストは同様に機能しますが、ネストされた`.grid`のインスタンスごとに列数をリセットする必要がある場合があります。詳細については、ネストセクションを参照してください。

例

3列

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

<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`です。開始クラスは前者の略記です。これらを列クラスと組み合わせて、必要に応じて列のサイズと配置を調整します。開始クラスは、`0`がこれらのプロパティの無効な値であるため、`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では`.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 Gridの行には`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には単一の値（すべての辺に適用）または値のペア（垂直方向と水平方向）を使用できます。これは、gapのインラインスタイル、または--bs-gap CSS変数を使用して適用できます。

<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の制約として、デフォルトのクラスは$grid-columnsと$grid-gutter-widthという2つのSass変数によって生成される点が挙げられます。これは、コンパイルされた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>