amis2/scss/layout/_grid.scss

@mixin make-grid($class) {
  @for $i from 1 through $Grid-columns {
    .#{$ns}Grid-col--#{$class}#{$i} {
      flex: 0 0 percentage($i / $Grid-columns);
      max-width: percentage($i / $Grid-columns);
      min-height: 1px;
      padding-left: ($Grid-gutterWidth / 2);
      padding-right: ($Grid-gutterWidth / 2);
    }
  }

  .#{$ns}Grid-col--#{$class} {
    flex-basis: 0;
    flex-grow: 1;
    min-height: 1px;
    max-width: 100%;
    width: 0; // 很重要，没有的话会被撑开。
    padding-left: ($Grid-gutterWidth / 2);
    padding-right: ($Grid-gutterWidth / 2);
  }

  .#{$ns}Grid-col--#{$class}Auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding-left: ($Grid-gutterWidth / 2);
    padding-right: ($Grid-gutterWidth / 2);
  }
}

// Generate Grid row
@mixin make-row($gutter: $Grid-gutterWidth) {
  margin-left: ($gutter / -2);
  margin-right: ($gutter / -2);
  display: flex;
  flex-wrap: wrap;
}

@include make-grid(xs);

@include media-breakpoint-up(sm) {
  .#{$ns}Grid {
    @include make-row;
    flex: 1;
  }

  @include make-grid(sm);
}

@include media-breakpoint-up(md) {
  @include make-grid(md);
}

@include media-breakpoint-up(lg) {
  @include make-grid(lg);
}