JSFiddle - React, Tailwind, and code Playground

HTML

<div id="boxes">

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS

.box{width:100px;height:100px;background-color:red;float:left;margin:10px 0 0 10px}

JavaScript

var boxes_per_even_line = Math.floor($('#boxes').width() / 110);
var boxes_per_odd_line = boxes_per_even_line-1;
var boxes_every_two_lines = boxes_per_even_line + boxes_per_odd_line;
console.log(boxes_per_even_line, boxes_per_odd_line, boxes_every_two_lines)
var boxes = $('.box');
var total = boxes.length;

for(var i=boxes_per_even_line; i<total; i+=boxes_every_two_lines) {
    $(boxes[i]).css('margin-left', 65);
    $(boxes[i+boxes_per_odd_line-1]).css('margin-right', 65);
}