今天在研究網站 RWD 框架，由於 Bootstrap 太大一包還在猶豫是否要引入，目前先手刻一套，分享給各位~

斷點

$breakpoint: 600px 900px 1200px 1800px
區分五種區間，代號分別為：xs, sm, md, lg, xl。
( 斷點參考 Alex宅幹嘛 )

HTML

1. 外層 .gs ( grid system) 即為一列
2. 每列設計為 12 欄
3. 行內元素 .col-尺寸代號-佔欄數
4. 每一種區間，所有行內元素的佔欄數相加(或者等於) 12 為宜
5. 行內元素若加上 .col ，最左欄、最右欄有除去 gutter(間距) 的效果

HTML 舉例如下：

<div class="gs">
  <div class="col col-xs-12 col-md-4 col-lg-2"></div>
  <div class="col col-xs-12 col-md-4 col-lg-8"></div>
  <div class="col col-xs-12 col-md-4 col-lg-2"></div>
</div>

引入樣式

$breakpoint: 600px 900px 1200px 1800px

.gs
  width: 100%
  display: flex
  flex-wrap: wrap
  // 最左欄、最右欄除去 gutter(間距) 效果
  .col
    padding: 5px
    &:first-child
      padding-left: 0
    &:last-child
      padding-right: 0
      
// 600px 以下
@media (max-width: nth($breakpoint, 1))
  .gs
    &>.col-xs-1
      width: 100%/12
    &>.col-xs-2
      width: 100%/12 * 2
    &>.col-xs-3
      width: 100%/12 * 3
    &>.col-xs-4
      width: 100%/12 * 4
    &>.col-xs-5
      width: 100%/12 * 5
    &>.col-xs-6
      width: 100%/12 * 6
    &>.col-xs-7
      width: 100%/12 * 7
    &>.col-xs-8
      width: 100%/12 * 8
    &>.col-xs-9
      width: 100%/12 * 9
    &>.col-xs-10
      width: 100%/12 * 10
    &>.col-xs-11
      width: 100%/12 * 11
    &>.col-xs-12
      width: 100%/12 * 12

//600px - 900px
@media (min-width: nth($breakpoint, 1)) and (max-width: nth($breakpoint, 2))
  .gs
    &>.col-sm-1
      width: 100%/12
    &>.col-sm-2
      width: 100%/12 * 2
    &>.col-sm-3
      width: 100%/12 * 3
    &>.col-sm-4
      width: 100%/12 * 4
    &>.col-sm-5
      width: 100%/12 * 5
    &>.col-sm-6
      width: 100%/12 * 6
    &>.col-sm-7
      width: 100%/12 * 7
    &>.col-sm-8
      width: 100%/12 * 8
    &>.col-sm-9
      width: 100%/12 * 9
    &>.col-sm-10
      width: 100%/12 * 10
    &>.col-sm-11
      width: 100%/12 * 11
    &>.col-sm-12
      width: 100%/12 * 12

//900px - 1200px
@media (min-width: nth($breakpoint, 2)) and (max-width: nth($breakpoint, 3))
  .gs
    &>.col-md-1
      width: 100%/12
    &>.col-md-2
      width: 100%/12 * 2
    &>.col-md-3
      width: 100%/12 * 3
    &>.col-md-4
      width: 100%/12 * 4
    &>.col-md-5
      width: 100%/12 * 5
    &>.col-md-6
      width: 100%/12 * 6
    &>.col-md-7
      width: 100%/12 * 7
    &>.col-md-8
      width: 100%/12 * 8
    &>.col-md-9
      width: 100%/12 * 9
    &>.col-md-10
      width: 100%/12 * 10
    &>.col-md-11
      width: 100%/12 * 11
    &>.col-md-12
      width: 100%/12 * 12

//1200px - 1800px
@media (min-width: nth($breakpoint, 3)) and (max-width: nth($breakpoint, 4))
  .gs
    &>.col-lg-1
      width: 100%/12
    &>.col-lg-2
      width: 100%/12 * 2
    &>.col-lg-3
      width: 100%/12 * 3
    &>.col-lg-4
      width: 100%/12 * 4
    &>.col-lg-5
      width: 100%/12 * 5
    &>.col-lg-6
      width: 100%/12 * 6
    &>.col-lg-7
      width: 100%/12 * 7
    &>.col-lg-8
      width: 100%/12 * 8
    &>.col-lg-9
      width: 100%/12 * 9
    &>.col-lg-10
      width: 100%/12 * 10
    &>.col-lg-11
      width: 100%/12 * 11
    &>.col-lg-12
      width: 100%/12 * 12

//1800px 以上
@media (min-width: nth($breakpoint, 4))
  .gs
    &>.col-xl-1
      width: 100%/12
    &>.col-xl-2
      width: 100%/12 * 2
    &>.col-xl-3
      width: 100%/12 * 3
    &>.col-xl-4
      width: 100%/12 * 4
    &>.col-xl-5
      width: 100%/12 * 5
    &>.col-xl-6
      width: 100%/12 * 6
    &>.col-xl-7
      width: 100%/12 * 7
    &>.col-xl-8
      width: 100%/12 * 8
    &>.col-xl-9
      width: 100%/12 * 9
    &>.col-xl-10
      width: 100%/12 * 10
    &>.col-xl-11
      width: 100%/12 * 11
    &>.col-xl-12
      width: 100%/12 * 12

以上這段應該可以再優化，等想到再來更新~~