Minimal CSS Grid System with flexbox

/* Greatly inspired by Frow https://github.com/Beg-in/frow */
.row,
[class*="row-"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -15px; /* Gutters */
    margin-right: -15px; /* Gutters */
}

.row > *,
[class*="row-"] > * {
    max-width: 100%;
    width: 100%;
    padding-left: 15px; /* Gutters */
    padding-right: 15px; /* Gutters */
}

@media (min-width: 992px) { /* Only on desktop by default */
    .row,
    [class*="row-"] {
        justify-content: start;
    }
    /* Only on unstyled col in unstyled row 
       That way, unstyled col in styled rows will adapt */
    .row > * { 
        flex: 1 1 auto;
        width: auto;
    }

    .row-1 > * { width: 100%; }
    .row-2 > * { width: 50%; }
    .row-3 > * { width: 33.33%; }
    .row-4 > * { width: 25%; }
    .row-5 > * { width: 20%; }
    .row-6 > * { width: 16.66%; }
    .row-7 > * { width: 14.28%; }
    .row-8 > * { width: 12.5%; }
    .row-9 > * { width: 11.11%; }
    .row-10 > * { width: 10%; }
    .row-11 > * { width: 9.09%; }
    .row-12 > * { width: 8.33%; }

    .col-1 { width: 8.33%; }
    .col-2 { width: 16.66%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33%; }
    .col-5 { width: 41.66%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33%; }
    .col-8 { width: 66.66%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33%; }
    .col-11 { width: 91.66%; }
    .col-12 { width: 100%; }
}

So you can add columns without class:

<div class="row">
    <div></div>
    <div></div>
</div>

Or, you can specify the number of columns with .row-*:

<div class="row-2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

(will output 2 columns of 3 items)

Or, you can specify the width of each item with .col-*:

<div class="row-12">
    <div class="col-6"></div>
    <div class="col-2"></div>
    <div></div> <!-- Automagically fill -->
    <div class="col-1"></div>
</div>

By default, will be displayed as a single column on mobile and tablets.