CSS Grid Calculator

grid-N = (100 - (gap * (N - 1))) / N + '%';

Columns: %
Gap: %
Column Width: 17.2 %
17.2%
17.2%
17.2%
17.2%
17.2%
79.3%
17.2%
CSS & HTML Code: 
.sample-grid {
  width:auto;
  overflow:hidden;
  margin:0 auto;
}

.sample-grid .custom-grid-5 {
  width:17.2%;
  margin:0 0 1.5em 3.5%;
  float:left;
  display:inline;
  overflow:hidden;
  word-wrap:break-word;
  min-height:1px;
}

.sample-grid .custom-grid-5:first-child {margin-left:0}

@media (max-width:767px) {
  .sample-grid .custom-grid-5 {
    float:none;
    display:block;
    width:auto;
    margin:0 0 1.5em 0;
  }
}
 
<div class="sample-grid">
    <div class="custom-grid-5"> ... </div>
    <div class="custom-grid-5"> ... </div>
    <div class="custom-grid-5"> ... </div>
    <div class="custom-grid-5"> ... </div>
    <div class="custom-grid-5"> ... </div>
</div>
Asymetric: %
Gap: %
76.5%
20%
CSS & HTML Code: 
.sample-grid-1 {
  width:auto;
  overflow:hidden;
  margin:0 auto;
}

.sample-grid-1 .left-grid,
.sample-grid-1 .right-grid {
  margin:0 0 1.5em 3.5%;
  float:left;
  display:inline;
  overflow:hidden;
  word-wrap:break-word;
  min-height:1px;
}

.sample-grid-1 .left-grid {width:76.5%}
.sample-grid-1 .right-grid {width:20%}

.sample-grid-1 .left-grid:first-child,
.sample-grid-1 .right-grid:first-child {margin-left:0}

@media (max-width:767px) {
  .sample-grid-1 .left-grid,
  .sample-grid-1 .right-grid {
    float:none;
    display:block;
    width:auto;
    margin:0 0 1.5em 0;
  }
}
 
<div class="sample-grid-1">
    <div class="left-grid"> ... </div>
    <div class="right-grid"> ... </div>
</div>