flexboxのgapでBootstrapのグリッドレイアウトを定義し直してみる

safariの14.1から、flexboxでgapプロパティが使えるようになった。
これで、メインのモダンブラウザ全てでflexboxのgapに対応したことになる。

gap property for Flexbox | Can I use...

それで、Bootstrapのグリッドレイアウトの間隔の定義をなんとかできないかと思った。
Bootstrapは便利だけれど、グリッドレイアウトの列間をmarginとpaddingで作っているので、
colのdivにmargin,paddingを直接指定してもうまくいかない。

以下例。

だからcolの内側にさらにdivを置くことになり、divの階層が深くなってしまう。
デザインが複雑になってくると「Bootstrap使わない方が楽なんじゃ…」となってしまう。

Bootstrapのグリッドがgapで作られていれば、marginとpaddingが空くので汎用性が上がる。

npmでbootstrapをインストールして、sassからコンパイルしてみる。
参考： Customize (カスタマイズ) · Bootstrap v5.0

1. node_modules/bootstrap/scss/bootstrap.scss を assets/css/bootstrap.scss にコピー
2. node_modules/bootstrap/scss/mixins/_grid.scss を assets/css/mixins/_grid.scss にコピー
3. assets/css/bootstrap.scss の mixin を読み込んでいる下で import して上書きする
4. assets/css/mixins/_grid.scss を修正する。

直したコードはgithubに上げました。
kanemu/bootstrap-custom-grid-example

修正はこんな感じ。
https://github.com/kanemu/bootstrap-custom-grid-example/commit/e6c8a0e796e3310ac7180409ec47b1d27096dbeb#

 /// Grid system
 //
 // Generate semantic grid columns with these mixins.
-
 @mixin make-row($gutter: $grid-gutter-width) {
   --#{$variable-prefix}gutter-x: #{$gutter};
   --#{$variable-prefix}gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+  column-gap: var(--#{$variable-prefix}gutter-x);
+  row-gap: var(--#{$variable-prefix}gutter-y);
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -21,15 +19,12 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
-  margin-top: var(--#{$variable-prefix}gutter-y);
 }
 
 @mixin make-col($size: false, $columns: $grid-columns) {
   @if $size {
     flex: 0 0 auto;
-    width: percentage($size / $columns);
+    width: calc((100% + var(--#{$variable-prefix}gutter-x)) * #{$size / $columns} - var(--#{$variable-prefix}gutter-x));
   } @else {
     flex: 1 1 0;
     max-width: 100%;

見てみると、divの両端がきちんとテキストの両端に揃う

左右にpaddingを入れても、列間がきっちり揃う。
いい感じになった。

2021/05/19 追記

.offset-* クラスも対応しました。

Fix .offset- classes · kanemu/bootstrap-custom-grid-example@f0b7bfa

2021/05/21 追記

.row—cols-* クラスも対応しました。

Fix .row—cols-* classes · kanemu/bootstrap-custom-grid-example@008040f