_grid.less

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Default Grid
//  _____________________________________________

//
//  Variables
//  _____________________________________________

//  Number of columns in the grid
@grid-columns: 12;
@grid-gutter-width: 0;

//  Form Fields Grid Sketch grid
@temp_gutter: 30px;
@temp_columns: 12;

//
//  Row
//  ---------------------------------------------

//  Rows contain and clear the floats of your columns.
.row {
    .make-row();
}

//
//  Columns
//  ---------------------------------------------

//  Common styles for small and large grid columns
.make-grid-columns();

//  Extra small grid
//  Columns, offsets, pushes, and pulls for extra small devices like smartphones.
.make-grid(xs);

//  Small grid
//  Columns, offsets, pushes, and pulls for the small device range, from phones to tablets.
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .make-grid(m);
}

//  Medium grid
//  Columns, offsets, pushes, and pulls for the desktop device range.
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .make-grid(l);
}

//  Large grid
//  Columns, offsets, pushes, and pulls for the large desktop device range.
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
    .make-grid(xl);
}

//
//  Gutter
//  ---------------------------------------------

.row-gutter {
    margin-left: -(@content__indent / 2);
    margin-right: -(@content__indent / 2);
    > [class*='col-'] {
        padding-left: (@content__indent / 2);
        padding-right: (@content__indent / 2);
    }
}

//
//  Form Fields Grid Sketch
//  _____________________________________________

#mix-grid() {
    .row() {
        .lib-clearer();
        margin-left: ~'-@{temp_gutter}';
    }

    .return_length(@_columns-min, @_total: @temp_columns, @mathSymbol: '-') {
        @_part: (@_columns-min/@_total);
        @_length: ~'calc( (100%) * @{_part} @{mathSymbol} @{temp_gutter} )';
    }

    .width(@_columns-min, @_total: @temp_columns) {
        #mix-grid .return_length(@_columns-min, @_total);
        width: @_length;
    }

    .column(@_columns-min, @_total: @temp_columns) {
        #mix-grid .width(@_columns-min, @_total);
        float: left;
        margin-left: @temp_gutter;
    }
}