CSS Grid

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

Examples

Three columns

size="4"属性を使用することで、すべてのビューポートとデバイスにわたって3つの等幅カラムを作成できます。 responsive classes を追加して、ビューポートサイズによってレイアウトを変更します。

.g-col-4
.g-col-4
.g-col-4
vue
<template>
 <Grid>
  <GridCol :size="4">
   .g-col-4
  </GridCol>
  <GridCol :size="4">
   .g-col-4
  </GridCol>
  <GridCol :size="4">
   .g-col-4
  </GridCol>
 </Grid>
</template>

Responsive

レスポンシブクラスを使用して、ビューポート間でレイアウトを調整します。ここでは、最も狭いビューポートでは2カラムから始め、ミディアムビューポート以上では3カラムに増やします。

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
vue
<template>
 <Grid>
  <GridCol size="6 md-4">
   .g-col-6 .g-col-md-4
  </GridCol>
  <GridCol size="6 md-4">
   .g-col-6 .g-col-md-4
  </GridCol>
  <GridCol size="6 md-4">
   .g-col-6 .g-col-md-4
  </GridCol>
 </Grid>
</template>

すべてのビューポートでこの2列のレイアウトと比較してみてください。

.g-col-6
.g-col-6
vue
<template>
 <Grid>
  <GridCol size="6">
   .g-col-6
  </GridCol>
  <GridCol size="6">
   .g-col-6
  </GridCol>
 </Grid>
</template>

Wrapping

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

.g-col-6
.g-col-6
.g-col-6
.g-col-6
vue
<template>
 <Grid>
  <GridCol :size="6">
   .g-col-6
  </GridCol>
  <GridCol :size="6">
   .g-col-6
  </GridCol>

  <GridCol :size="6">
   .g-col-6
  </GridCol>
  <GridCol :size="6">
   .g-col-6
  </GridCol>
 </Grid>
</template>

Starts

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

.g-col-3 .g-start-2
>.g-col-4 .g-start-6
vue
<template>
 <Grid>
  <GridCol
   :size="3"
   :colmun-start="2"
  >
   .g-col-3 .g-start-2
  </GridCol>
  <GridCol
   :size="4"
   :colmun-start="6"
  >
   >.g-col-4 .g-start-6
  </GridCol>
 </Grid>
</template>

Auto columns

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

1
1
1
1
1
1
1
1
1
1
1
1
vue
<template>
 <Grid>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
 </Grid>
</template>

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

.g-col-6
1
1
1
1
1
1
vue
<template>
 <Grid>
  <GridCol :size="6">
   .g-col-6
  </GridCol>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
  <b-div>1</b-div>
 </Grid>
</template>

Nesting

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

  • columns属性でデフォルトのカラム数を上書きします。
  • 最初の自動カラムでは、カラム数は継承され、各カラムは利用可能な幅の3分の1になります。
  • 2番目の自動カラムでは、ネストされたGridのカラム数を12(デフォルト)にリセットしています。
  • 3番目のオートカラムには、ネストされたコンテンツはありません。

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

First auto-column
Auto-column
Auto-column
Second auto-column
6 of 12
4 of 12
2 of 12
Third auto-column
vue
<template>
 <Grid :columns="3">
  <GridCol>
   First auto-column
   <Grid>
    <GridCol>Auto-column</GridCol>
    <GridCol>Auto-column</GridCol>
   </Grid>
  </GridCol>
  <GridCol>
   Second auto-column
   <Grid :columns="12">
    <GridCol :size="6">
     6 of 12
    </GridCol>
    <GridCol :size="4">
     4 of 12
    </GridCol>
    <GridCol :size="2">
     2 of 12
    </GridCol>
   </Grid>
  </GridCol>
  <GridCol>Third auto-column</GridCol>
 </Grid>
</template>

Customizing

ローカルCSS変数で、列数、行数、隙間の幅をカスタマイズできます。

AttributeFallback valueDescription
rows1The number of rows in your grid template
columns12The number of columns in your grid template
gap1.5remThe size of the gap between columns (vertical and horizontal)

これらのCSS変数にはデフォルト値がありません。代わりに、ローカルインスタンスが提供されるまで使用されるフォールバック値が適用されます。例えば、CSSグリッドの行に、rows:1を使用していますが、rowsはまだどこにも設定されていないので無視されます。いったん設定されると、Gridインスタンスはフォールバック値である1の代わりにその値を使用します。

No grid classes

Gridの直接の子要素は、グリッドアイテムなので、GridColを明示的に追加しなくてもサイズが決まります。

Auto-column
Auto-column
Auto-column
vue
<template>
 <Grid :columns="3">
  <GridCol>Auto-column</GridCol>
  <GridCol>Auto-column</GridCol>
  <GridCol>Auto-column</GridCol>
 </Grid>
</template>

Columns and gaps

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

.g-col-2
.g-col-2
vue
<template>
 <Grid
  :columns="4"
  gap="5rem"
 >
  <GridCol :size="2">
   .g-col-2
  </GridCol>
  <GridCol :size="2">
   .g-col-2
  </GridCol>
 </Grid>
</template>
.g-col-6
.g-col-4
vue
<template>
 <Grid
  :columns="10"
  gap="1rem"
 >
  <GridCol :size="2">
   .g-col-6
  </GridCol>
  <GridCol :size="2">
   .g-col-4
  </GridCol>
 </Grid>
</template>

Adding rows

行をふやし、列の配置を変える。

Auto-column
Auto-column
Auto-column
vue
<template>
 <Grid
  :rows="3"
  :columns="3"
 >
  <GridCol>Auto-column</GridCol>
  <GridCol
   :colmun-start="2"
   :row="2"
  >
   Auto-column
  </GridCol>
  <GridCol
   :colmun-start="3"
   :row="3"
  >
   Auto-column
  </GridCol>
 </Grid>
</template>

Gaps

row-gapを変更することで、垂直方向のギャップのみを変更できます。.gridではgapを使用していますが、row-gapとcolumn-gapは必要に応じて変更できることに注意してください。

.g-col-6
.g-col-6
.g-col-6
.g-col-6
vue
<template>
 <Grid :row-gap="0">
  <GridCol :size="6">
   .g-col-6
  </GridCol>
  <GridCol :size="6">
   .g-col-6
  </GridCol>

  <GridCol :size="6">
   .g-col-6
  </GridCol>
  <GridCol :size="6">
   .g-col-6
  </GridCol>
 </Grid>
</template>

そのため、垂直方向と水平方向のgapを変えることができ、1つの値（全ての辺）または2つの値（垂直方向と水平方向）をとることができます。これは、gapのインラインスタイル、またはgap 属性で適用できます。

.g-col-6
.g-col-6
.g-col-6
.g-col-6
vue
<template>
 <Grid gap=".25rem 1rem">
  <GridCol :size="6">
   .g-col-6
  </GridCol>
  <GridCol :size="6">
   .g-col-6
  </GridCol>

  <GridCol :size="6">
   .g-col-6
  </GridCol>
  <GridCol :size="6">
   .g-col-6
  </GridCol>
 </Grid>
</template>

See Also