JSFiddle - React, Tailwind, and code Playground

HTML

<p class="out"></p>

JavaScript

//grid = 1200px, margin = 10px, initial box = 40px. including margin = 50px;
var w = 3.33333333333; //initial width minus the margin = 40px
var m = 0.83333333333; //margin = 10px
var n = 24; //number of columns
var units = "%"; //px or em or percent?
for (i = 1; i <= n; i++) {
    var box = i*w + i*m;
    //box = Math.round(box * 100) / 100; //round off for fluid grids
    var output = '.box-' + i + '{width:' + box + units + ';}<br/>';
    $('.out').append(output);


}