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
-
node_modules/bootstrap/scss/bootstrap.scssをassets/css/bootstrap.scssにコピー -
node_modules/bootstrap/scss/mixins/_grid.scssをassets/css/mixins/_grid.scssにコピー -
assets/css/bootstrap.scssの mixin を読み込んでいる下で import して上書きする -
assets/css/mixins/_grid.scssを修正する。
直したコードはgithubに上げました。
kanemu/bootstrap-custom-grid-example
/// 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