JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.box {
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
}

#conainer {
    background-color: grey;
    display: inline-block;
}

JavaScript

$(document).ready(function(){
    var box = $(".box");
    var con = $("#container");
    var box_per_line = Math.floor(parseInt($("#container").width())/ (parseInt( $(".box").width()) +10*2/*px*/));
    var style = "black";
    $(".box").each(function(i){
        if(i % box_per_line == 0){ style = (style == "black") ? "grey" : "black"; }
        $(this).css("background-color",style);
    });
});