CSS グリッド
例とコード スニペットを使用して、CSS グリッド上に構築された代替レイアウト システムを有効にし、使用し、カスタマイズする方法を学びます。
Bootstrap のデフォルト グリッド システムは、何百万人もの人々によって試行され、テストされた 10 年以上の CSS レイアウト技術の集大成です。ただし、新しい CSS グリッドなどのブラウザーで見られる最新の CSS 機能や技術の多くを使用せずに作成されたものでもあります。
使い方
Bootstrap 5 では、CSS Grid に基づいて構築された別のグリッド システムを有効にするオプションが追加されましたが、Bootstrap のひねりが加えられています。気まぐれに適用してレスポンシブ レイアウトを構築できるクラスは引き続き取得できますが、内部では異なるアプローチが使用されます。
-
CSS グリッドはオプトインです。を設定してデフォルトのグリッド システムを無効にし、設定
$enable-grid-classes: falseで CSS グリッドを有効にします$enable-cssgrid: true。次に、Sass を再コンパイルします。 -
.rowのインスタンスをに置き換えます.grid。この.gridクラスは、HTML で構築する を設定display: gridおよび作成grid-templateします。 -
.col-*クラスをクラスに置き換え.g-col-*ます。これは、CSS Grid 列が のgrid-column代わりに プロパティを使用するためですwidth。 -
列と余白のサイズは、CSS 変数を介して設定されます。これらを親に設定し、
.grid必要に応じてインラインまたはスタイルシートでカスタマイズし--bs-columnsます--bs-gap。
将来、Bootstrap はハイブリッド ソリューションに移行する可能性があります。これは、gapプロパティが flexbox のほぼ完全なブラウザー サポートを達成しているためです。
主な違い
デフォルトのグリッド システムとの比較:
-
Flex ユーティリティは、CSS Grid 列に同じようには影響しません。
-
ギャップはガターに取って代わります。このプロパティは、デフォルトのグリッド システム
gapの水平方向を置き換え、 のように機能します。paddingmargin -
そのため、s とは異なり
.row、.grids には負のマージンがなく、マージン ユーティリティを使用してグリッドのガターを変更することはできません。デフォルトでは、グリッド ギャップは水平方向と垂直方向に適用されます。詳細については、カスタマイズのセクションを参照してください。 -
style="--bs-columns: 3;"インライン スタイルとカスタム スタイルは、修飾子クラス ( vsなど)の代わりと見なす必要がありますclass="row-cols-3"。 -
ネストも同様に機能しますが、ネストされた の各インスタンスで列数をリセットする必要がある場合があります
.grid。詳細については、ネスティングのセクションを参照してください。
例
3列
.g-col-4クラスを使用して、すべてのビューポートとデバイスで同じ幅の 3 つの列を作成できます。レスポンシブ クラスを追加して、ビューポート サイズでレイアウトを変更します。
<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>レスポンシブ
レスポンシブ クラスを使用して、ビューポート全体でレイアウトを調整します。ここでは、最も狭いビューポートで 2 列から始めて、中程度のビューポート以上で 3 列に増やします。
<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 列のレイアウトと比較してください。
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>ラッピング
グリッド アイテムは、水平方向にスペースがなくなると、自動的に次の行に折り返されます。gapは、グリッド アイテム間の水平方向および垂直方向のギャップに適用されることに注意してください。
<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>スタート
開始クラスは、デフォルト グリッドのオフセット クラスを置き換えることを目的としていますが、完全に同じではありません。CSS グリッドは、ブラウザーに「この列で開始」および「この列で終了」するように指示するスタイルを介してグリッド テンプレートを作成します。これらのプロパティはgrid-column-startとgrid-column-endです。開始クラスは前者の省略形です。それらを列クラスと組み合わせて、必要に応じて列のサイズと位置を合わせます。開始クラスは、これらのプロパティの無効な値1として開始されます。0
<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、各グリッド項目は自動的に 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>この動作は、グリッド列クラスと混在させることができます。
<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>ネスティング
デフォルトのグリッド システムと同様に、CSS グリッドを使用すると、 を簡単にネストできます.grid。ただし、デフォルトとは異なり、このグリッドは行、列、およびギャップの変更を継承します。以下の例を考えてみましょう。
- デフォルトの列数をローカル CSS 変数でオーバーライドします:
--bs-columns: 3. - 最初の自動列では、列数が継承され、各列は使用可能な幅の 3 分の 1 になります。
- 2 番目の自動列では、ネストされた列の列数
.gridを 12 (デフォルト) にリセットしました。 - 3 番目の自動列には、ネストされたコンテンツはありません。
実際には、これにより、デフォルトのグリッド システムと比較して、より複雑なカスタム レイアウトが可能になります。
<div class="grid" 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 変数を使用して、列数、行数、ギャップの幅をカスタマイズします。
| 変数 | フォールバック値 | 説明 |
|---|---|---|
--bs-rows |
1 |
グリッド テンプレートの行数 |
--bs-columns |
12 |
グリッド テンプレートの列数 |
--bs-gap |
1.5rem |
列間のギャップのサイズ (垂直および水平) |
これらの CSS 変数にはデフォルト値がありません。代わりに、ローカル インスタンスが提供されるまで使用されるフォールバック値を適用します。たとえば、まだどこにも設定されていないためvar(--bs-rows, 1)無視される CSS グリッド行に使用します。--bs-rowsこれが完了すると、.gridインスタンスは のフォールバック値の代わりにその値を使用します1。
グリッド クラスなし
の直接の子要素.gridはグリッド アイテムであるため、.g-colクラスを明示的に追加しなくてもサイズが変更されます。
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>列とギャップ
列の数とギャップを調整します。
<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><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>行の追加
行の追加と列の配置の変更:
<div class="grid" 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ます。ここではgapon .grids を使用していますが、row-gapandcolumn-gapは必要に応じて変更できることに注意してください。
<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そのため、単一の値 (すべての側面) または値のペア (垂直と水平) を取ることができる異なる垂直方向と水平方向の s を持つことができます。これは、インライン スタイルgapまたは--bs-gapCSS 変数で適用できます。
<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>サス
CSS グリッドの制限の 1 つは、デフォルト クラスが 2 つの Sass 変数によって生成されていること$grid-columnsです$grid-gutter-width。これにより、コンパイル済み CSS で生成されるクラスの数が効果的に事前に決定されます。ここには 2 つのオプションがあります。
- これらのデフォルトの Sass 変数を変更し、CSS を再コンパイルします。
- インラインまたはカスタム スタイルを使用して、提供されたクラスを拡張します。
たとえば、列数を増やしてギャップ サイズを変更し、インライン スタイルと定義済みの CSS グリッド列クラス (例: .g-col-4) を組み合わせて「列」のサイズを変更できます。
<div class="grid" 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>