scss 传统的sass网格系统没有flexbox，但也没有使用浮动。为具有IE9支持的项目创建。

Posted 2021-05-17

<div>
  <div className="grid-row">
    <div className="col _6 col-demo">col _6</div>
    <div className="col _6 col-demo">col _6</div>
  </div>
  <div className="grid-row">
    <div className="col _6">
      <div className="grid-row">
        <div className="col _6 col-demo">nested col _6</div>
        <div className="col _6 col-demo">nested col _6</div>
      </div>
    </div>
    <div className="col _6 col-demo">col _6</div>
  </div>
  <div className="grid-row">
    <div className="col _2 col-demo">col _2</div>
    <div className="col _2 col-demo">col _2</div>
    <div className="col _2 col-demo">col _2</div>
    <div className="col _2 col-demo">col _2</div>
    <div className="col _2 col-demo">col _2</div>
    <div className="col _2 col-demo">col _2</div>
  </div>
</div>

.grid-row {
  display:block;
  width:100%;
  padding:0;
  margin:0;
  box-sizing: border-box;
  vertical-align:top;

  .col {
    display:inline-block;
    box-sizing: border-box;
    margin:$grid-gutter / 2;
    vertical-align:top;

    &.no-margin-between {
      margin: 0;
    }

    &-demo {
      background-color:pink;
      padding:0.5rem;
    }
  }

  .col:first-child {
    margin-left:0;
  }

  @for $i from 1 through $grid-columns {
    ._#{$i}, {
      width: unquote((100%) + "%");
      $multiplier: $i / $grid-columns;
      width: calc(100% * #{$multiplier} - #{$grid-gutter} * (1 - #{$multiplier}));
    }
    ._#{$i}:nth-child(#{12 / $i}n) {
      margin-right:0;
    }
    ._#{$i}:nth-child(#{12 / $i}n + 1) {
      margin-left:0;
    }
  }
}