JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class='block'>
    <div class='column'>
        <div class='item'>1</div>
        <div class='item'>4</div>
    </div>
    <div class='column'>
        <div class='item'>2</div>
        <div class='item'>5</div>
    </div>
    <div class='column'>
        <div class='item'>3</div>
        <div class='item'>6</div>
    </div>
</div>

CSS

.block {
    width: 930px;
}
.column {
    width: 130px;
    float: left;
}
.item {
    width: 130px;
    height: 300px;
    background-color: green;
}

JavaScript

var arr = [6,7,8,9,10,11];

var columns = $('column');

for (var i in columns) {
    var item = $('<div />', {'class':'item'}); 
    columns[i].append(item);
}