Matryoshka Sass micro-framework (nestable)

matryoshka.scss

/**
 * Sass import for generating nestable containers.
 * The "rest" of the grid is just flex boxes.
 */
*, :after, :before {
  box-sizing: inherit;
}
html, body {
  padding: 0;
  margin: 0;
}
.container {
  width: 90%;
  max-width: 80em;
  margin: 0 auto;
  zoom: 1;
  &:before, &:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
  &:after {
    clear: both;
  }
}

.row {
  display: flex;

  &--gutter {
    @extend .row;
    margin-left: -0.5rem;
    margin-right: -0.5rem;

    > * {
      margin-left: 0.5rem;
      margin-right: 0.5rem;
    }
  }

  > .col-1 { flex: 1; }
  > .col-2 { flex: 2; }
  > .col-3 { flex: 3; }
  > .col-4 { flex: 4; }
  > .col-5 { flex: 5; }
  > .col-6 { flex: 6; }
  > .col-7 { flex: 7; }
  > .col-8 { flex: 8; }
  > .col-9 { flex: 9; }
  > .col-10 { flex: 10; }
  > .col-11 { flex: 11; }
  > .col-12 { flex: 12; }
}

Demo here