Bootstrap5 Grid Gystem Layout解構與速成客製化響應式間距 Grid

工作時的小筆記。

沒想到 css variables 拿摸好用~本來覺得它超廢

bootstrap5 的 grid system 大量改用 css variables 控制 .row 的負值 margin 和.col-* 的 padding^1，而這兩者是設定grid間距的關鍵。因這項改動，bs5推出響應式間距 .g-bk-spacers ^2。

而好用在於…要客製一個只用一次又有響應式間距需求的 grid 變得非常方便迅速，尤其又不想改動$gutterst^3產生一堆class(增加數量＝間距數量x (bk+1)數量）的話。直接設個class 設定 css variables 和 media queries 內再設一個 css variables，在 DOM 內將之取代 .g-* 的位置， 就結束了。

.g-class{ --#{$variable-prefix}gutter-x:1.25rem: // mobile 間距 1.25rem @include media-breackpoint-up(lg){ --#{$variable-prefix}gutter-x:3.75rem: // desktop 間距 3.75rem } }

<div class="row g-class"> <div class="col">...</div> <div class="col">...</div> </div>

^1 https://github.com/twbs/bootstrap/blob/main/scss/mixins/_grid.scss
^2 https://getbootstrap.com/docs/5.1/layout/gutters/#row-columns-gutters
^3 https://getbootstrap.com/docs/5.1/layout/gutters/#change-the-gutters