【Bootstrap】Bootstrap5.1の新機能「CSS Grid」を試す | Wood-Roots:blog

2021年8月にBootstrap5.1がリリースされました。
新しい機能の追加や既存機能のアップデートがありますが、個人的にはCSS Gridが気になります。

ということで、実際に使ってみました。

詳しい使い方や仕様については公式ドキュメントを参照してください。

実際の表示デモも作成しました。

CSS Gridを有効にする

デフォルトではCSS Gridの機能は無効となっています。
_variables.scss内の「$enable-cssgrid」をtrueにし、ビルドする必要があります。

基本的な使い方

Bootstrapではこれまで列として.row、行として.colというクラスを付けていましたが、列を「.grid」、行を「.g-col」とするだけです。
従来の.colと同様に「.g-col-3」「.g-col-sm-4」とカラム数やブレークポイントの接頭詞を付けることで、カラムの幅やレスポンシブへの対応を行うこともできます。

ほぼ従来のグリッドと同様の使い方ができますが、次のような注意点があります。

「.col」「.col-auto」はない

従来のグリッドでは「.col」というクラスを付けることで余った幅を埋めるようなカラムを作ることができましたが、CSS Gridではこのようなカラムは作れません。

※一応grid-columnを自力で適用させることで余った横方向のスペースを埋めるカラムを作ることは可能です。

.grid直下は全部「.col-1」になる

デモ
.grid直下の要素に「col-数字」クラスを指定しない場合、「.col-1」が指定されたときと同じことになります。

カスタマイズ

CSS Gridの実装に伴い、専用のユーティリティクラスも追加されました。

オフセット

デモ
.g-colに「.g-start-数字」クラスを追加することで、カラムの開始位置をずらすことができます。
従来の「.offset-数字」クラスと同様です。

行・列の数を変更する

デモ
Bootstrapでは列（row）は1、行（col）は12ですが、この数値をCSS variablesにより変更することができます。

行は分かりますが列を1以外に変更すると何ができるのか、については後述のサンプルをご参照ください。

カラム間の隙間を変更する

デモ
カラム間の隙間をCSS variablesにより変更できます。
余白を0とすることで隙間なく要素を敷き詰めるようなレイアウトが可能となります。

実際の使用例

よくあるレイアウトをCSS Gridを使用して作ってみます。

3カラム（Holy Grail）

デモ
これは従来でもできますね。

グリッドレイアウト

このブログの一覧で使っているレイアウトです。
Bootstrap 4のグリッドでがんばったのでとても大変でした…。

デモ
従来のグリッドはflexを使っていたため、カラムを縦方向に結合する（tableでいうrowspan）ができませんでした。
新しいCSS Gridではgrid-rowを書かなければいけないものの、縦方向への結合（というかカラムの延長というべきか）が可能となります。

Masonry

デモ
同じく、横方向か縦方向にしか並べることのできない従来のカラムではできなかったMasonryレイアウトも.grid>.g-colの最小構成で可能となります。

個人的な感想

Bootstrapは将来的には現在のflexによるグリッドシステムをCSS Gridに置き換える予定だと思いますが、現時点で使うにはちょっと時期尚早かなという印象です。

CSS Gridに期待しているのは、マガジンスタイルのように矩形を自由自在に配置したレイアウトをネストが少ないHTMLで実現することだと思います。
そしてBootstrapには、スタイルを書かずにクラスの付加だけでレイアウトを構成できることを期待しています。

ですが現時点ではマガジンスタイルを実現するためにはstyleを書かなくてはならず、それなら自力で書くかiotaのようなグリッドに特化したフレームワークを使うほうが適切ではないかと思います。

今後の発展に期待して☆3つ！ということで。