CSS minimal grid

grid.css

.row {
    display: flex;
    flex-wrap: wrap;
    margin-top: -15px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: -15px;
}
.row > .col,
.row > [class*="col__"] {
    padding-top: 15px; 
    padding-right: 0; 
    padding-bottom: 0;
    padding-left: 15px;
}
.no-gutters {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col__"] {
  padding-top: 0;
  padding-left: 0;
}

/* ================================= */
/* Size and UP                       */
/* ================================= */

/* XS: Mobile-first */
.col, .col__fill { flex: 1; }
.col__12 { flex: 0 0 100%; }
.col__11 { flex: 0 0 91.6666666667%; }
.col__10 { flex: 0 0 83.3333333333%; }
.col__9 { flex: 0 0 75%; }
.col__8 { flex: 0 0 66.6666666667%; }
.col__7 { flex: 0 0 58.3333333333%; }
.col__6 { flex: 0 0 50%; }
.col__5 { flex: 0 0 41.6666666667%; }
.col__4 { flex: 0 0 33.3333333333%; }
.col__3 { flex: 0 0 25%; }
.col__2 { flex: 0 0 16.6666666667%; }
.col__1 { flex: 0 0 8.3333333333%; }

.contain, .contain-fluid, [class^="contain__"], [class^="contain-fluid__"] { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
.row.contain, .row.contain-fluid, .row[class^="contain__"], .row[class^="contain-fluid__"] { padding-left: 0; }
.contain-fluid__slim { width: 60%; }
.contain-fluid__medium { width: 75%; }
.contain-fluid__wide { width: 90%; }

.flex { display: flex; }

.items__start { align-items: flex-start; }
.items__end { align-items: flex-end; }
.items__center { align-items: center; }
.items__baseline { align-items: baseline; }
.self__start { align-self: flex-start; }
.self__end { align-self: flex-end; }
.self__center { align-self: center; }
.justify__start { justify-content: flex-start; }
.justify__center { justify-content: center; }
.justify__end { justify-content: flex-end; }
.justify__between { justify-content: space-between; }
.justify__around { justify-content: space-around; }
.wrap { flex-wrap: wrap; }
.nowrap { flex-wrap: nowrap; }

.hide { display: none; }

CDN:

https://gistcdn.githack.com/Jonarod/5993bec6f56ec3f51449f8bb2ba65394/raw/e0e24f434419133a4e7e9665bffb624c21464c91/grid.css

@import url("https://gistcdn.githack.com/Jonarod/5993bec6f56ec3f51449f8bb2ba65394/raw/e0e24f434419133a4e7e9665bffb624c21464c91/grid.css");