Ultra-simple, automatic, non-float, 1-4 column, grid system
This is not to take away at all from your system above, which is very smart.

I'm still very much on the CSS Grid learning curve and I was genuinely curious to see how straightforward / difficult it might be to replicate your output above, using CSS Grid.



.grid {
  display: grid;
  grid-template: repeat(4, 42px) / auto;
  grid-gap: 8px;
}

div p {
  margin: 0;
  padding: 0;
  line-height: 42px;
  text-align: center;
  font-family: sans-serif;
}

.box-1 {color: #fff; background-color: #4af;}
.box-2 {color: #fff; background-color: #fa4;}
.box-3 {color: #000; background-color: #def;}
.box-4 {color: #000; background-color: #fed;}

@media (min-width: 540px) {
  
  .grid {grid-template: repeat(2, 42px) / repeat(2, auto); grid-gap: 16px;}
}

@media (min-width: 800px) {
  
  .grid {grid-template: 42px / repeat(4, auto);}
}
&lt;div class="grid"&gt;
  &lt;div class="box-1"&gt;&lt;p&gt;col&lt;/p&gt;&lt;/div&gt;
  &lt;div class="box-2"&gt;&lt;p&gt;col&lt;/p&gt;&lt;/div&gt;
  &lt;div class="box-3"&gt;&lt;p&gt;col&lt;/p&gt;&lt;/div&gt;
  &lt;div class="box-4"&gt;&lt;p&gt;col&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;