此篇会教学如何将 Bootstrap grid 格线系统，自干一个出来。

事前准备

• Gird System 格线系统基础观念
• RWD 响应式基础观念

若还不认识 格线系统 的朋友们，欢迎先阅读完事前准备的两篇文章，看完再来看这篇介绍会更好消化呦。

Bootstrap 格线系统真的蛮好用的，且在使用其他框架时也会载入来用，但如果都载入一个框架了，只使用它的格线系统，不会觉得有点那个吗？

原始码

使用到两只档案：

_grid.scss：格线系统主要执行入口。
mixins/_grid.scss：负责生成格线系统样式。

简单分为两个区块介绍（row、col）。

此范例只介绍基础的格线系统，不包含 row-cols、col-auto、col-offset。(如果回响不错可能未来会补上)

第一区块

将第一区块分三步骤来解析。

Step1：判断是否有启用生成格线系统

透过选项 (Options)设置 $enable-grid-classes 来判断是否要生成 grid 样式。（预设是 true）

$enable-grid-classes:         true !default;

Step2：生成 row 样式

主要从 mixins/_grid.scss 生成 row 样式。

@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);
  margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2);
  margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2);
}

• $grid-gutter-width：column 彼此之间的距离。

  • col 左右两边会加上 padding 的距离，因此设置 $grid-gutter-width / 2。
  • Bootstrap 5 预设是 1.5rem（24px），所以左右两边各是 12px，但常用的是 15px，所以会将 $grid-gutter-width 设为 1.875rem（30px）。

• $variable-prefix：属於 root 变数。

  • bs- 作为前缀避免与第三方套件的样式冲突。

• flex：格线系统是基於 flex，也继承了伸缩的特性。

• wrap：使 column 超过宽度时能够自动换行。

• 透过 var() 函式重新将含 Interpolation 的字串转为变数。（常见的组合变数手法）

• margin 负数

  • gutter 指的是 column 彼此之间的距离，但为了解决最左、右边的 column 多出来的 padding，需要设置 margin 负值 将容器给往外推挤出多的间距去补足多出来的间距。（可以尝试把移除 margin 会发现 row 的宽度会少 24px，因为用来填补多出来的左右间距）

Step3：生成 col 外层样式

从外层可以看到样式是 > *，代表的是 row 内 所有第一层 都会吃到此样式，第二三四层都不会吃到。

@mixin make-col-ready($gutter: $grid-gutter-width) {
  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2);
  padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2);
  margin-top: var(--#{$variable-prefix}gutter-y);
}

box-sizing：透过设置 $include-column-box-sizing，来判断是否将 box-sizing 设置为 border-box。

• 设置为 border-box，计算 column 尺寸时才会包含 padding，不然 column 的 width 就不准确了。

flex-shrink：设置空间压缩比例。（预设值 1）

• 设置为 0，使其透过 column 栏数来自动分配对应的压缩比例。

width：设置宽度 100%。

• 代表预设是满版（col-12），後需再设置不同的 col-* 来覆盖 width 的值。

max-width：设置最大宽度 100%。

• 防止在某些样式下破版。（ex：.col-auto、.col）

padding：推挤内层空间。

• 透过设置左右 padding，来推挤出 栏与栏之间的 gutter 间距。