amis2/scss/layout/_grid.scss

// .#{$ns}form-grid {
//     >div>.form-group {
//         margin-left: 0;
//         margin-right: 0;
//     }
// }

// Grid
// @mixin container-fixed($gutter: $Grid-gutterWidth) {
//     margin-right: auto;
//     margin-left: auto;
//     padding-left: floor(($gutter / 2));
//     padding-right: ceil(($gutter / 2));
//     @include clearfix;
// }

// Framework Grid
// @mixin make-grid-columns($i: 1, $list: ".#{$ns}Grid-col--xs#{$i}, .#{$ns}Grid-col--sm#{$i}, .#{$ns}Grid-col--md#{$i}, .#{$ns}Grid-col--lg#{$i}") {
//     @for $i from (1 + 1) through $Grid-columns {
//         $list: "#{$list}, .#{$ns}Grid-col--xs#{$i}, .#{$ns}Grid-col--sm#{$i}, .#{$ns}Grid-col--md#{$i}, .#{$ns}Grid-col--lg#{$i}";
//     }

//     #{$list} {
//         position: relative;
//         min-height: 1px;
//         padding-left: ceil(($Grid-gutterWidth / 2));
//         padding-right: floor(($Grid-gutterWidth / 2));
//     }
// }

// @mixin float-grid-columns($class, $i: 1, $list: ".#{$ns}Grid-col--#{$class}#{$i}") {
//     @for $i from (1 + 1) through $Grid-columns {
//         $list: "#{$list}, .#{$ns}Grid-col--#{$class}#{$i}";
//     }

//     #{$list} {
//         float: left;
//     }
// }

// @mixin calc-grid-column($index, $class, $type) {
//     @if ($type==width) and ($index > 0) {
//         .#{$ns}Grid-col--#{$class}#{$index} {
//             width: percentage(($index / $Grid-columns));
//         }
//     }

//     @if ($type==push) and ($index > 0) {
//         .#{$ns}Grid-col--#{$class}Push#{$index} {
//             left: percentage(($index / $Grid-columns));
//         }
//     }

//     @if ($type==push) and ($index==0) {
//         .#{$ns}Grid-col--#{$class}Push0 {
//             left: auto;
//         }
//     }

//     @if ($type==pull) and ($index > 0) {
//         .#{$ns}Grid-col--#{$class}Pull#{$index} {
//             right: percentage(($index / $Grid-columns));
//         }
//     }

//     @if ($type==pull) and ($index==0) {
//         .#{$ns}Grid-col--#{$class}Pull0 {
//             right: auto;
//         }
//     }

//     @if ($type==offset) {
//         .#{$ns}Grid-col--#{$class}Offset#{$index} {
//             margin-left: percentage(($index / $Grid-columns));
//         }
//     }
// }

// @mixin loop-grid-columns($columns, $class, $type) {
//     @for $i from 0 through $columns {
//         @include calc-grid-column($i, $class, $type);
//     }
// }

@mixin make-grid($class) {
    // @include float-grid-columns($class);
    // @include loop-grid-columns($Grid-columns, $class, width);
    // @include loop-grid-columns($Grid-columns, $class, pull);
    // @include loop-grid-columns($Grid-columns, $class, push);
    // @include loop-grid-columns($Grid-columns, $class, offset);

    @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);
    }
}

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

// .#{$ns}Grid-container {
//     @include container-fixed;

//     @include media-breakpoint-up(sm) {
//         width: $container-sm;
//     }

//     @include media-breakpoint-up(md) {
//         width: $container-md;
//     }

//     @include media-breakpoint-up(lg) {
//         width: $container-lg;
//     }
// }

// .#{$ns}Grid-container-fluid {
//     @include container-fixed;
// }

// @include make-grid-columns;

@include make-grid(xs);

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

    @include make-grid(sm);
}

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

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