A simple CSS grid based on flexbox

grid.css

* {
  box-sizing: border-box;
}
[class^=col-] {
  flex: 0 0 100%;
  padding: 0 15px;
}
.container {
  max-width: 540px;
  margin: 0 auto;
  padding: 0 15px;
}
.row {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.col-xs {
  flex-grow: 1;
  flex-basis: 0;
}
.col-xs-1 { flex-basis: calc(100% / 12 * 1); }
.col-xs-2 { flex-basis: calc(100% / 12 * 2); }
.col-xs-3 { flex-basis: calc(100% / 12 * 3); }
.col-xs-4 { flex-basis: calc(100% / 12 * 4); }
.col-xs-5 { flex-basis: calc(100% / 12 * 5); }
.col-xs-6 { flex-basis: calc(100% / 12 * 6); }
.col-xs-7 { flex-basis: calc(100% / 12 * 7); }
.col-xs-8 { flex-basis: calc(100% / 12 * 8); }
.col-xs-9 { flex-basis: calc(100% / 12 * 9); }
.col-xs-10 { flex-basis: calc(100% / 12 * 10); }
.col-xs-11 { flex-basis: calc(100% / 12 * 11); }
.col-xs-12 { flex-basis: calc(100% / 12 * 12); }
@media (max-width: 569px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 570px) {
  .container {
    max-width: 540px;
  }
  .col-sm {
    flex-grow: 1;
    flex-basis: 0;
  }
  .col-sm-1 { flex-basis: calc(100% / 12 * 1); }
  .col-sm-2 { flex-basis: calc(100% / 12 * 2); }
  .col-sm-3 { flex-basis: calc(100% / 12 * 3); }
  .col-sm-4 { flex-basis: calc(100% / 12 * 4); }
  .col-sm-5 { flex-basis: calc(100% / 12 * 5); }
  .col-sm-6 { flex-basis: calc(100% / 12 * 6); }
  .col-sm-7 { flex-basis: calc(100% / 12 * 7); }
  .col-sm-8 { flex-basis: calc(100% / 12 * 8); }
  .col-sm-9 { flex-basis: calc(100% / 12 * 9); }
  .col-sm-10 { flex-basis: calc(100% / 12 * 10); }
  .col-sm-11 { flex-basis: calc(100% / 12 * 11); }
  .col-sm-12 { flex-basis: calc(100% / 12 * 12); }
  @media (max-width: 749px) {
    .hidden-sm {
      display: none !important;
    }
  }
}
@media (min-width: 750px) {
  .container {
    max-width: 720px;
  }
  .col-md {
    flex-grow: 1;
    flex-basis: 0;
  }
  .col-md-1 { flex-basis: calc(100% / 12 * 1); }
  .col-md-2 { flex-basis: calc(100% / 12 * 2); }
  .col-md-3 { flex-basis: calc(100% / 12 * 3); }
  .col-md-4 { flex-basis: calc(100% / 12 * 4); }
  .col-md-5 { flex-basis: calc(100% / 12 * 5); }
  .col-md-6 { flex-basis: calc(100% / 12 * 6); }
  .col-md-7 { flex-basis: calc(100% / 12 * 7); }
  .col-md-8 { flex-basis: calc(100% / 12 * 8); }
  .col-md-9 { flex-basis: calc(100% / 12 * 9); }
  .col-md-10 { flex-basis: calc(100% / 12 * 10); }
  .col-md-11 { flex-basis: calc(100% / 12 * 11); }
  .col-md-12 { flex-basis: calc(100% / 12 * 12); }
  @media (max-width: 989px) {
    .hidden-md {
      display: none !important;
    }
  }
}
@media (min-width: 990px) {
  .container {
    max-width: 960px;
  }
  .col-lg {
    flex-grow: 1;
    flex-basis: 0;
  }
  .col-lg-1 { flex-basis: calc(100% / 12 * 1); }
  .col-lg-2 { flex-basis: calc(100% / 12 * 2); }
  .col-lg-3 { flex-basis: calc(100% / 12 * 3); }
  .col-lg-4 { flex-basis: calc(100% / 12 * 4); }
  .col-lg-5 { flex-basis: calc(100% / 12 * 5); }
  .col-lg-6 { flex-basis: calc(100% / 12 * 6); }
  .col-lg-7 { flex-basis: calc(100% / 12 * 7); }
  .col-lg-8 { flex-basis: calc(100% / 12 * 8); }
  .col-lg-9 { flex-basis: calc(100% / 12 * 9); }
  .col-lg-10 { flex-basis: calc(100% / 12 * 10); }
  .col-lg-11 { flex-basis: calc(100% / 12 * 11); }
  .col-lg-12 { flex-basis: calc(100% / 12 * 12); }
  @media (max-width: 1169px) {
    .hidden-lg {
      display: none !important;
    }
  }
}
@media (min-width: 1170px) {
  .container {
    max-width: 1140px;
  }
}