plain-ui/src/scss/layouts/_grid.scss

@import
    'grid/mixins',
    'grid/helpers';

.container,
.container-full {
    @include box-sizing(border-box);

    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: ($grid__spacing * 2);
    padding-left: ($grid__spacing * 2);

    .grid {
        margin-right: -$grid__spacing;
        margin-left: -$grid__spacing;
    }
}

.container {
    @media (min-width: $grid__xs) {
        max-width: $grid__xs;
    }

    @media (min-width: $grid__sm) {
        max-width: $grid__sm;
    }

    @media (min-width: $grid__md) {
        max-width: $grid__md;
    }

    @media (min-width: $grid__lg) {
        max-width: $grid__lg;
    }

    @media (min-width: $grid__xlg) {
        max-width: $grid__xlg;
    }
}

.grid {
    display: block;

    @include box-sizing(border-box);
    @include display-flex();
    @include flex-wrap();

    padding: 0;
    margin: 0 auto;
    position: relative;

    &::after,
    &::before {
        @include box-sizing(border-box);
    }

    // handle when lists are used as a grid
    list-style-type: none;
}


.col-grid {
    @include box-sizing(border-box);
    position: relative;
    width: 100%;
    vertical-align: top;
    padding: $grid__spacing;

    &::after,
    &::before {
        @include box-sizing(border-box);
    }

    // handle grids nested in columns
    .grid {
        @include flex(1, 1, auto);
        margin: -$grid__spacing;
    }
}

@for $i from 1 through $grid__columns {
    .col-#{$i} {
        @extend .col-grid;
    }
}


/**
 *  grid generation
 *
 *
 */

@include grid-make(col-);

@media (min-width: $grid__xs) {
    @include grid-make(col-xs-);
}

@media (min-width: $grid__sm) {
    @include grid-make(col-sm-);
}

@media (min-width: $grid__md) {
    @include grid-make(col-md-);
}

@media (min-width: $grid__lg) {
    @include grid-make(col-lg-);
}

@media (min-width: $grid__xlg) {
    @include grid-make(col-xlg-);
}


/**
 *  col-auto
 *
 *
 */

.col-auto {
    @extend .col-grid;
    @include grid-setup-auto-cols();
}

.col-xs-auto, .col-sm-auto, .col-lg-auto, .col-xlg-auto {
    @extend .col-grid;
}

@media (min-width: $grid__xs) {
    .col-xs-auto {
        @include grid-setup-auto-cols();
    }
}

@media (min-width: $grid__sm) {
    .col-sm-auto {
        @include grid-setup-auto-cols();
    }
}

@media (min-width: $grid__md) {
    .col-md-auto {
        @include grid-setup-auto-cols();
    }
}

@media (min-width: $grid__lg) {
    .col-lg-auto {
        @include grid-setup-auto-cols();
    }
}

@media (min-width: $grid__xlg) {
    .col-xlg-auto {
        @include grid-setup-auto-cols();
    }
}


/**
 *  order helpers generation
 *
 *
 */

@include grid-make-order-helpers();

@media (min-width: $grid__xs) {
    @include grid-loop-order-helpers($grid__columns, '-xs');
}

@media (min-width: $grid__sm) {
    @include grid-loop-order-helpers($grid__columns, '-sm');
}

@media (min-width: $grid__md) {
    @include grid-loop-order-helpers($grid__columns, '-md');
}

@media (min-width: $grid__lg) {
    @include grid-loop-order-helpers($grid__columns, '-lg');
}

@media (min-width: $grid__xlg) {
    @include grid-loop-order-helpers($grid__columns, '-xlg');
}


/**
 *  offset helpers generation
 *
 *
 */

@include grid-make-offset-helpers();

@media (min-width: $grid__xs) {
    @include grid-loop-offset-helpers($grid__columns - 1, '-xs');
}

@media (min-width: $grid__sm) {
    @include grid-loop-offset-helpers($grid__columns - 1, '-sm');
}

@media (min-width: $grid__md) {
    @include grid-loop-offset-helpers($grid__columns - 1, '-md');
}

@media (min-width: $grid__lg) {
    @include grid-loop-offset-helpers($grid__columns - 1, '-lg');
}

@media (min-width: $grid__xlg) {
    @include grid-loop-offset-helpers($grid__columns - 1, '-xlg');
}