JSFiddle - React, Tailwind, and code Playground

by dsgnr

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+m); //i*(box+margin)- This is width inclusive of margins
    var box2 = i*(w+m)-m;//exclusive of margins, if you want to add separate classes for margins
    //box = Math.round(box * 100) / 100; //round off for fluid grids
    var output = '.box-' + i + '{width:' + box2 + units + ';}<br/>';
    $('.out').append(output);


}