JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script type="text/mustache-template" id="columns">
<div id="content">
<div class='col1'>
{{#this[0]}}
<span> {{this.name}} is {{@index}} </span>
{{/this[0]}}
</div>
<div class='col2'>
{{#this[1]}}
<span> {{this.name}} is {{@index}} </span>
{{/this[1]}}
</div>
<div class='col3'>
{{#this[2]}}
<span> {{this.name}} is {{@index}} </span>
{{/this[2]}}
</div>
<div class='col4'>
{{#this[3]}}
<span> {{this.name}} is {{@index}} </span>
{{/this[3]}}
</div>
</div>
</script>
CSS
#content{
width:80%;
border:2px solid gray;
box-sizing:border-box;
}
#content div{
width:25%;
border:1px solid red;
box-sizing:border-box;
}
span{
display:block;
}
JavaScript
var staticData = {
datas : [
{"name": "Test Task #1", "date": "12/01/2012", "assigned": "John Doe" },
{"name": "Test Task #2", "date": "12/02/2012", "assigned": "John Doe" },
{"name": "Test Task #3", "date": "12/03/2012", "assigned": "John Doe" },
{"name": "Test Task #4", "date": "12/04/2012", "assigned": "John Doe" },
{"name": "Test Task #5", "date": "12/05/2012", "assigned": "John Doe" },
{"name": "Test Task #6", "date": "12/06/2012", "assigned": "John Doe" },
{"name": "Test Task #7", "date": "12/07/2012", "assigned": "John Doe" }
]
};
var newArray = [], columns = 4;
$.each(staticData.datas, function (index, value) {
for(i=0;i < columns; i++){
newArray[i] == undefined ? newArray[i] = [] : newArray[i]; //creating new arrays
}
newArray[index % 4 ].push(value); //pushing the appropriate values
});
var html = Mustache.render($('#columns').html(), newArray); //sending the hole new array.
$('body').append(html);