CSSグリッド CSS Grid

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

仕組み

Bootstrap 5では、CSS Gridに基づいて構築された別のgridシステムを有効にするオプションを追加しましたが、Bootstrapのひねりが加えられています。レスポンシブレイアウトを構築するために適用できるclassesは引き続き利用できますが、フードの下では異なるアプローチが採用されています。

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

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

• .col-* classesを.g-col-* classesに置き換えます。 これは、CSS Grid columnsがwidthの代わりにgrid-columnプロパティを使用するためです。

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

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

主な違い

デフォルトのgridシステムと比較して：

• Flex utilitiesは、CSS Grid columnsに同じ方法で影響しません。

• Gapsがguttersに置き換わります。gapプロパティは、デフォルトのgridシステムの水平paddingを置き換え、marginのように機能します。

• そのため、.rowとは異なり、.gridには負のmarginsがなく、margin utilitiesを使用してgridのguttersを変更することはできません。Grid gapsはデフォルトで水平方向と垂直方向の両方に適用されます。詳細については、カスタマイズセクションを参照してください。

• インラインとカスタムスタイルは、修飾子classesの代替と見なされるべきです（例：style="--bs-columns: 3;"対class="row-cols-3"）。

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

例

3つのcolumns

すべてのビューポートとデバイスで3つの等幅columnsを作成するには、.g-col-4 classesを使用します。レスポンシブclassesを追加して、ビューポートサイズごとにレイアウトを変更します。

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

レスポンシブ

レスポンシブclassesを使用して、ビューポート間でレイアウトを調整します。ここでは、最も狭いビューポートで2つのcolumnsから始めて、中程度のビューポート以上で3つのcolumnsに拡大します。

<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つのcolumnレイアウトと比較してください。

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

折り返し

Grid itemsは、水平方向にスペースがなくなると自動的に次の行に折り返されます。gapは、grid items間の水平方向と垂直方向のgapsに適用されることに注意してください。

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

開始位置

Start classesは、デフォルトのgridのoffset classesを置き換えることを目的としていますが、完全に同じではありません。CSS Gridは、ブラウザに「このcolumnから開始」し、「このcolumnで終了」するように指示するスタイルを通じてgrid templateを作成します。これらのプロパティはgrid-column-startとgrid-column-endです。Start classesは前者の省略形です。必要に応じてcolumn classesと組み合わせて、columnsのサイズと配置を行います。Start classesは1から始まります。これらのプロパティでは0は無効な値です。

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

Autoのcolumns

Grid items（.gridの直接の子）にclassesがない場合、各grid itemは自動的に1つのcolumnにサイズ設定されます。

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

この動作は、grid column classesと混在させることができます。

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

ネスト

デフォルトのgridシステムと同様に、CSS Gridでは.gridを簡単にネストできます。ただし、デフォルトとは異なり、このgridはrows、columns、およびgapsの変更を継承します。次の例を考えてみましょう：

• ローカルCSS変数でデフォルトのcolumns数をオーバーライドします：--bs-columns: 3。
• 最初のauto-columnでは、columnカウントが継承され、各columnは使用可能な幅の3分の1です。
• 2番目のauto-columnでは、ネストされた.gridのcolumnカウントを12（デフォルト）にリセットしました。
• 3番目のauto-columnには、ネストされたコンテンツがありません。

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

<div class="grid text-center overflow-x-auto" 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変数を使用して、columnsの数、rowsの数、およびgapsの幅をカスタマイズします。

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

Grid classesなし

.gridの直接の子要素はgrid itemsであるため、.g-col classを明示的に追加しなくてもサイズ設定されます。

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

ColumnsとGaps

columnsの数とgapを調整します。

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

Rowsの追加

rowsを追加し、columnsの配置を変更します：

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

Gaps

row-gapを変更することで、垂直gapsのみを変更します。.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のインラインスタイル、または--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の1つの制限は、デフォルトのclassesが、2つのSass変数$grid-columnsと$grid-gutter-widthによって生成されることです。これにより、コンパイルされたCSSで生成されるclassesの数が事実上事前決定されます。ここには2つのオプションがあります：

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

例えば、columnカウントを増やしてgapサイズを変更し、インラインスタイルと事前定義されたCSS Grid column classes（例：.g-col-4）を組み合わせて「columns」のサイズを設定できます。

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