metro4/less/grid.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "include/vars";
@import (once) "include/mixins";

.grid {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 1rem;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -@gridGapSize;
    margin-right: -@gridGapSize;
}

.row + .row {
    //margin-top: @gridGapSize * 2;
}

.cell {
    flex: 1 0 0;
    max-width: 100%;
    padding: 0 @gridGapSize;
}

.cell-1, .cell-2, .cell-3, .cell-4, .cell-5, .cell-6, .cell-7, .cell-8, .cell-9, .cell-10, .cell-11, .cell-12,
.cell-sx-1, .cell-sx-2, .cell-sx-3, .cell-sx-4, .cell-sx-5, .cell-sx-6, .cell-sx-7, .cell-sx-8, .cell-sx-9, .cell-sx-10, .cell-sx-11, .cell-sx-12,
.cell-sm-1, .cell-sm-2, .cell-sm-3, .cell-sm-4, .cell-sm-5, .cell-sm-6, .cell-sm-7, .cell-sm-8, .cell-sm-9, .cell-sm-10, .cell-sm-11, .cell-sm-12,
.cell-ld-1, .cell-ld-2, .cell-ld-3, .cell-ld-4, .cell-ld-5, .cell-ld-6, .cell-ld-7, .cell-ld-8, .cell-ld-9, .cell-ld-10, .cell-ld-11, .cell-ld-12,
.cell-md-1, .cell-md-2, .cell-md-3, .cell-md-4, .cell-md-5, .cell-md-6, .cell-md-7, .cell-md-8, .cell-md-9, .cell-md-10, .cell-md-11, .cell-md-12,
.cell-lg-1, .cell-lg-2, .cell-lg-3, .cell-lg-4, .cell-lg-5, .cell-lg-6, .cell-lg-7, .cell-lg-8, .cell-lg-9, .cell-lg-10, .cell-lg-11, .cell-lg-12,
.cell-xl-1, .cell-xl-2, .cell-xl-3, .cell-xl-4, .cell-xl-5, .cell-xl-6, .cell-xl-7, .cell-xl-8, .cell-xl-9, .cell-xl-10, .cell-xl-11, .cell-xl-12,
.cell-xxl-1, .cell-xxl-2, .cell-xxl-3, .cell-xxl-4, .cell-xxl-5, .cell-xxl-6, .cell-xxl-7, .cell-xxl-8, .cell-xxl-9, .cell-xxl-10, .cell-xxl-11, .cell-xxl-12,
.cell-sx, .cell-sm, .cell-ld, .cell-md, .cell-lg, .cell-xl, .cell-xxl,
.cell-sx-auto, .cell-sm-auto, .cell-ld-auto, .cell-md-auto, .cell-lg-auto, .cell-xl-auto, .cell-xxl-auto,
.cell-sx-full, .cell-sm-full, .cell-ld-full, .cell-md-full, .cell-lg-full, .cell-xl-full, .cell-xxl-full,
.cell-sx-half, .cell-sm-half, .cell-ld-half, .cell-md-half, .cell-lg-half, .cell-xl-half, .cell-xxl-half,
.cell-sx-one-third, .cell-sm-one-third, .cell-ld-one-third, .cell-md-one-third, .cell-lg-one-third, .cell-xl-one-third, .cell-xxl-one-third,
.cell-sx-two-third, .cell-sm-two-third, .cell-ld-two-third, .cell-md-two-third, .cell-lg-two-third, .cell-xl-two-third, .cell-xxl-two-third,
.cell-sx-quarter, .cell-sm-quarter, .cell-ld-quarter, .cell-md-quarter, .cell-lg-quarter, .cell-xl-quarter, .cell-xxl-quarter
{
    position: relative;
    display: block;
    padding: 0 @gridGapSize;
    width: 100%;
    min-height: 1px;
}

.cell-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

// colspan
.generate-colspan(@gridColumns12);
.generate-colspan(@j, @k: 2) when (@k =< @j){
    .colspan-@{k}, .cell-@{k} {
        flex: 0 0 @gridCellBaseSize * @k;
        max-width: @gridCellBaseSize * @k;
    }
    .generate-colspan(@j, (@k + 1));
}

// offset
.generate-offset(@gridColumns12);
.generate-offset(@j) when (@j > 0){
    .offset-@{j} {
        margin-left: @gridCellBaseSize * @j;
    }
    .generate-offset(@j - 1);
}

.stub {
    flex: none;
    display: block;
    padding: 0 @gridGapSize;
}

.grid {
    &.no-gap {
        .row {
            margin-left: 0;
            margin-right: 0;

            .cell, .stub {
                padding: 0;
            }
        }

        .row + .row {
            margin-top: 0;
        }
    }
}

.row {
    &.no-gap {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;

        .cell, .stub {
            padding: 0;
        }
    }
}

.generate-grid-media-options(@mediaBreakpointListMobileLength);
.generate-grid-media-options(@name, @i: 1) when (@i <= @mediaBreakpointListMobileLength) {
    @m: extract(@mediaBreakpointListMobile, @i);

    @media screen and (min-width: @@m) {

        .cell-@{m}-full {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .cell-@{m}-half {
            flex: 0 0 50%;
            max-width: 50%;
        }

        .cell-@{m}-one-third {
            flex: 0 0 33.3333333%;
            max-width: 33.3333333%;
        }

        .cell-@{m}-two-third {
            flex: 0 0 66.6666666%;
            max-width: 66.6666666%;
        }

        .cell-@{m}-quarter {
            flex: 0 0 25%;
            max-width: 25%;
        }

        .cell-@{m} {
            flex-basis: 0;
            flex-grow: 1;
            max-width: 100%;
        }

        .cell-@{m}-auto {
            flex: 0 0 auto;
            max-width: none;
        }

        .generate-colspan(@gridColumns12);
        .generate-colspan(@j, @k: 1) when (@k =< @j) {
            .colspan-@{m}-@{k}, .cell-@{m}-@{k} {
                flex: 0 0 @gridCellBaseSize * @k ;
                max-width: @gridCellBaseSize * @k ;
            }
            .generate-colspan(@j, (@k + 1));
        }

        .generate-offset(@gridColumns12);
        .generate-offset(@j) when (@j > 0){
            .offset-@{m}-@{j} {
                margin-left: @gridCellBaseSize * @j;
            }
            .generate-offset(@j - 1);
        }
    }

    .generate-grid-media-options(@name, @i + 1);
}