---
tags: Bootstrap5網頁切版整合術
---
# 3. Flex 與網格系統介紹 2-2

## 7. 欄與欄的間距：
### (1) Gutter的運作概念: Gutter在css中如何製作

#### ● Gutter width:
單一個col包含padding-right: 0.75rem + padding-left + : 0.75rem

最外層的col會多出padding，也就是gutter on outside就會由row去解決

#### ● row
row 的左右都會有負值的 margin: -0.75rem，可抵消 col 的 padding-right: 0.75rem與 padding-left: 0.75rem


#### ● row外層加上container
若單獨使用row會產生負值，就會有水平捲軸出現，阿捏無通，所以要在row外層加上container，避免出現水平捲軸

### (2) BS5實作的程式碼
bs5"沒有"把gutter0.75空間寫死在原始碼裡面，只要修改變數就可以用不同空間的gutter


1.在row加上變數--bs-gutter-x:1.5rem，

2.再將內層元素加上左右的padding→用row>* 選取內層所有元素，取出變數再乘以0.5 (這裡老師建議還是用col來製作)

3.然後加上margin-right+left，扣除最外層col多出padding

### **小結:**
1.格線系統結構由外而內為 .container, .row, .col-**
2.class="row"內層建議使用class="col-xx"
3.最外層再幫他補上一個class="conatiner"

### 備註
影片看完有點迷迷糊糊，剛好有同學寫了筆記，寫的滿清楚的，看完後我也寫了codepen加深知識點:https://codepen.io/tinchen/pen/eYeXpLj

[同學筆記-MARGIN 負值與BOOTSTRAPE5 GUTTER ON OUTSIDE的關係](https://popeye-ux.github.io/blog/gutteronoutside/)

## 8. css flex與格線系統

補圖

## 9. Utilities 通用類別：間隔 Spacing
1.水平置中mx-auto: 可將div對齊
2.負值運用: 預設沒有開啟，要調整設定檔(之後scss會講到)，
概念有點像col、row，範例左右有加上padding，可用**mx-n2**來清除
3.Gap: gap要在d-grid才能使用，[display grid](https://gridbyexample.com/examples/) 適合排版極為複雜的格線，大部分以 Bootstrap 網格系統為主。



## 10. Utilities 通用類別：Flex

需將容器轉換為d-flex (display:flex)
## 11. 格線系統與 Utilities 的混合運用
## 12. 格線系統：實作練習
## 13.格線系統：常見錯誤

<small>來源:六角學院-Bootstrap5網頁切版整合術</small>