tibi-svelte-starter/src/css/theme/components/grid.less

// Settings

@container_width: 1200px;
@columns: 12;
@main_padding: 15px;

// Grid

.container {
    margin: auto;
    width: @container_width;
    padding: 0 @main_padding;

    @media (max-width: 576px) {
        width: 90%;
    }
    @media (min-width: 576px) {
        width: 540px;
    }
    @media (min-width: 768px) {
        width: 720px;
    }
    @media (min-width: 992px) {
        width: 960px;
    }
    @media (min-width: 1200px) {
        width: 1140px;
    }
    @media (min-width: 1400px) {
        width: 1320px;
    }
}

// Mixins

.order(@val) {
    order: @val;
    -moz-order: @val;
    -webkit-order: @val;
}

// Row / Col

.row {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    margin: 0px -@main_padding;
    &.centerrow {
        each(range(@columns), {
			.col-@{value}, .col-xs-@{value}, .col-sm-@{value}, .col-md-@{value}, .col-lg-@{value} {
				align-items: center;
				justify-content: center;
			}
		});
    }
    &.fullwidth {
        margin: 0px;
    }
    .col {
        flex: none;
        padding: 0px @main_padding;
        width: 100%;

        .right {
            text-align: right;
            justify-content: flex-end;
        }
    }
}

each(range(@columns), {
	.col-@{value}, .col-xs-@{value}, .col-sm-@{value}, .col-md-@{value}, .col-lg-@{value} {
		flex:none;
		position:relative;
		min-height:1px;
		padding:0px @main_padding;
		width:100%;
		display:flex;
		display:-webkit-flex;
		flex-direction: column;
		flex-wrap:wrap;

        &.right {
            display: flex;
            justify-content: flex-end;

            & > * {
                margin-left: auto;
            }
        }
    }
	.order-@{value} {
		.order(@value);
	}
});

// Set Column Width on breakpoints
.loop (@val) {
    each(range(@columns), {
		.col-@{val}-@{value} {
			width: (100% / @columns * @value);
		}
		.order-@{val}-@{value} {
			.order(@value);
		}
	});
}

.col-0 {
    display: none;
}
each(range(@columns), {
	.col-@{value} {
		width: (100% / @columns * @value);
	}
	.order-@{value} {
		.order(@value);
	}
});

@media screen and (min-width: 500px) {
    .row .col {
        width: 50%;
        flex: none;
    }
    .row .col-xs-0 {
        display: none;
    }
    .loop(xs);
}

@media screen and (min-width: 768px) {
    .row .col {
        width: 33.3333333%;
        flex: none;
    }
    .row .col-sm-0 {
        display: none;
    }
    .loop(sm);
}

@media screen and (min-width: 1050px) {
    .row .col-md-0 {
        display: none;
    }
    .loop(md);
}

@media screen and (min-width: 1250px) {
    .row .col {
        flex: 1;
        width: auto;
    }
    .row .col-lg-0 {
        display: none;
    }
    .loop(lg);
}

// Hidden

@media screen and (max-width: 576px) {
    .hidden-xs {
        display: none !important;
    }
}
@media screen and (max-width: 768px) {
    .hidden-sm {
        display: none !important;
    }
}
@media screen and (max-width: 992px) {
    .hidden-md {
        display: none !important;
    }
}
@media screen and (max-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}
@media screen and (max-width: 1400px) {
    .hidden-xl {
        display: none !important;
    }
}