A dead simple grid system

grid

          // grid system
.grid-base,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.grid-1 > * {
  width: 100%;
}
.grid-2 > * {
  width: -webkit-calc(50% - 40px/2);
  width: calc(50% - 40px / 2);
}
.grid-2 > *:nth-child(2n + 1) {
  margin-right: 40px;
  margin-top: 20px;
}
@media only screen and (max-width: 1070px) {
  .block--related .grid-2 > * {
    width: 100%;
  }
  .block--related .grid-2 > *:nth-child(2n + 1) {
    margin-right: auto;
  }
}
@media only screen and (max-width: 860px) {
  .grid-2 > * {
    width: 100%;
  }
  .grid-2 > *:nth-child(2n + 1) {
    margin-right: auto;
  }
}

.grid-3 > * {
  width: -webkit-calc(33.33% - 2 * 40px/3);
  width: calc(33.33% - 2 * 40px / 3);
  margin: 20px 0;
}
.grid-3 > *:nth-child(3n + 2) {
  margin-left: 40px;
  margin-right: 40px;
}

@media only screen and (max-width: 1420px) {
  .grid-3 > * {
    width: -webkit-calc(50% - 40px/2);
    width: calc(50% - 40px / 2);
  }
  .grid-3 > *:nth-child(3n + 2) {
    margin-left: auto;
    margin-right: auto;
  }
  .grid-3 > *:nth-child(2n + 1) {
    margin-right: 40px;
  }
}
@media only screen and (max-width: 740px) {
  .grid-3 > * {
    width: 100%;
  }
  .grid-3 > *:nth-child(2n + 1) {
    margin-right: auto;
  }
}
.grid-4 > * {
  outline:1px solid red;
  width: -webkit-calc(25% - 3 * 40px/4);
  width: calc(25% - 3 * 40px / 4);
  margin: 20px 0;

}
.grid-4 > *:nth-child(4n + 1),
.grid-4 > *:nth-child(4n + 2),
.grid-4 > *:nth-child(4n + 3) {
  margin-right: 40px;
}
@media only screen and (max-width: 1120px) {
  .grid-4 > * {
    width: -webkit-calc(50% - 40px/2);
    width: calc(50% - 40px / 2);
  }
  .grid-4 > *:nth-child(4n + 1),
  .grid-4 > *:nth-child(4n + 2),
  .grid-4 > *:nth-child(4n + 3) {
    margin-right: 0;
  }
  .grid-4 > *:nth-child(2n + 1) {
    margin-right: 40px;
  }
}
@media only screen and (max-width: 460px) {
  .grid-4 > * {
    width: 100%;
  }
  .grid-4 > *:nth-child(2n + 1) {
    margin-right: 0;
  }
}
.grid-5 > * {
  width: -webkit-calc(20% - 4 * 40px/5);
  width: calc(20% - 4 * 40px / 5);
  margin: 20px 0;

}
.grid-5 > *:nth-child(5n + 2),
.grid-5 > *:nth-child(5n + 4) {
  margin-left: 40px;
  margin-right: 40px;
}
@media only screen and (max-width: 980px) {
  .grid-5 > * {
    width: -webkit-calc(25% - 3 * 40px/4);
    width: calc(25% - 3 * 40px / 4);
  }
  .grid-5 > *:nth-child(5n + 2),
  .grid-5 > *:nth-child(5n + 4) {
    margin-left: 0;
    margin-right: 0;
  }
  .grid-5 > *:nth-child(4n + 1),
  .grid-5 > *:nth-child(4n + 2),
  .grid-5 > *:nth-child(4n + 3) {
    margin-right: 40px;
  }
}
@media only screen and (max-width: 760px) {
  .grid-5 > * {
    width: -webkit-calc(33.33% - 2 * 40px/3);
    width: calc(33.33% - 2 * 40px / 3);
  }
  .grid-5 > *:nth-child(4n + 1),
  .grid-5 > *:nth-child(4n + 2),
  .grid-5 > *:nth-child(4n + 3) {
    margin-right: 0;
  }
  .grid-5 > *:nth-child(3n + 2) {
    margin-left: 40px;
    margin-right: 40px;
  }
}
@media only screen and (max-width: 540px) {
  .grid-5 > * {
    width: -webkit-calc(50% - 40px/2);
    width: calc(50% - 40px / 2);
  }
  .grid-5 > *:nth-child(3n + 2) {
    margin-left: 0;
    margin-right: 0;
  }
  .grid-5 > *:nth-child(2n + 1) {
    margin-right: 40px;
  }
}
.grid-6 > * {
  width: -webkit-calc(16.66% - 5 * 40px/6);
  width: calc(16.66% - 5 * 40px / 6);
  margin: 20px 0;

}
.grid-6 > *:nth-child(6n + 1),
.grid-6 > *:nth-child(6n + 2),
.grid-6 > *:nth-child(6n + 3),
.grid-6 > *:nth-child(6n + 4),
.grid-6 > *:nth-child(6n + 5) {
  margin-right: 40px;
}