Bootstrap5.1の新機能「CSS Grid」の使い方

Bootstrap5.1で追加された「CSS Grid」の簡単な解説や実装サンプルなどです。
ブログ記事もあわせてご覧ください。

基本的な使い方

.g-col-4
.g-col-4
.g-col-4
<div class="grid">
    <div class="g-col-4 bg-primary">.g-col-4</div>
    <div class="g-col-4 bg-secondary">.g-col-4</div>
    <div class="g-col-4 bg-info">.g-col-4</div>
</div>

レスポンシブ

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
<div class="grid">
    <div class="g-col-6 g-col-md-4 bg-primary">.g-col-6 .g-col-md-4</div>
    <div class="g-col-6 g-col-md-4 bg-secondary">.g-col-6 .g-col-md-4</div>
    <div class="g-col-6 g-col-md-4 bg-info">.g-col-6 .g-col-md-4</div>
  </div>

grid-columnを適用する

左
右全部 
<div class="grid">
    <div class="g-col-2 bg-primary">
        左
    </div>
    <div class="bg-secondary" style="grid-row: -1/3">
        右全部
    </div>
</div>

.grid配下にクラスを指定しない

1
1
1
1
1
1
1
1
1
1
1
1
<div class="grid">
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
    <div class="bg-primary">1</div>
</div>

オフセット

.g-col-3 .g-start-2
.g-col-4 .g-start-6
<div class="grid">
    <div class="g-col-3 g-start-2 bg-primary">.g-col-3 .g-start-2</div>
    <div class="g-col-4 g-start-6 bg-secondary">.g-col-4 .g-start-6</div>
</div>

行・列の変更

Auto-column
Auto-column
Auto-column
Auto-column
Auto-column
Auto-column
<!-- これは3カラムになる -->
<div class="grid mb-3" style="--bs-columns: 3;">
    <div class="bg-primary">Auto-column</div>
    <div class="bg-secondary">Auto-column</div>
    <div class="bg-info">Auto-column</div>
</div>

<!-- これは3x3のグリッドとなる -->
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
    <div class="bg-primary">Auto-column</div>
    <div class="g-start-2 bg-secondary" style="grid-row: 2">Auto-column</div>
    <div class="g-start-3 bg-info" style="grid-row: 3">Auto-column</div>
</div>

余白の変更

.g-col-6
.g-col-6
.g-col-6
.g-col-6
<div class="grid" style="--bs-gap: 0">
    <div class="g-col-6 bg-primary">.g-col-6</div>
    <div class="g-col-6 bg-secondary">.g-col-6</div>
    <div class="g-col-6 bg-info">.g-col-6</div>
    <div class="g-col-6 bg-danger">.g-col-6</div>
</div>

3カラム（Holy Grail）

Header
Left
Main
Main
Main
Main
Main
Main
Main
Right
Footer 
<div class="grid" style="--bs-gap: 0">
    <div class="g-col-12 bg-light">
        Header
    </div>
    <div class="g-col-3 bg-primary">
        Left
    </div>
    <div class="g-col-6">
        Main<br>
        Main<br>
        Main<br>
        Main<br>
        Main<br>
        Main<br>
        Main<br>
    </div>
    <div class="g-col-3 bg-secondary">
        Right
    </div>
    <div class="g-col-12 bg-dark text-white">
        Footer
    </div>
</div>

グリッドレイアウト

col
col
col
col
col
col
col
col
col
col
col 
<div class="grid" style="--bs-gap: 0;--bs-row: 2;grid-template-rows: 50%;">
    <div class="g-col-6 bg-primary" style="grid-row: 1 / 3">
        col<br>
        col<br>
        col<br>
        col<br>
        col<br>
        col<br>
        col<br>
    </div>
    <div class="g-col-3 bg-secondary">
        col
    </div>
    <div class="g-col-3 bg-info">
        col
    </div>
    <div class="g-col-3 bg-danger">
        col
    </div>
    <div class="g-col-3 bg-warning">
        col
    </div>
</div>

Masonry

Col
Col
Col
Col
Col
Col
Col
Col 
<div class="grid"
    style="--bs-columns: 4;--bs-gap: 0;grid-template-rows:none;grid-auto-rows: 100px;grid-auto-flow: dense;">
    <div class="g-col-2 bg-primary p-2" style="grid-row: span 2;">
        Col<br>
        Col
    </div>
    <div class="bg-secondary p-2">
        Col
    </div>


    <div class="g-col-2 bg-warning p-2" style="grid-row: span 2;">
        Col<br>
        Col
    </div>
    <div class="bg-info p-2">
        Col
    </div>
    <div class="bg-danger p-2">
        Col
    </div>
    <div class="bg-secondary p-2">
        Col
    </div>
</div>