JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="container">
	<div class="item big">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item big">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item big">12</div>	
</div>

<div class="columns"></div>

CSS

.columns {
	overflow: hidden;
}

.column {
	float: left;
	margin-right: 10px;
}

.column .item {
	width: 120px;
	height: 80px;
	background-color: green;
	margin-bottom: 10px;
}

.column .item.big {
	height: 170px;
}

JavaScript

function toMatrix(arr, row) {
	var a = [];

	for (var i = 0; i < row;) {
		a[i] ? a[i].push(arr.shift()) : (a[i] = []);
		i = ++i % row;
		if (!arr.length) return a;
	}
}

var items = $('.container .item').toArray();
var items_columns = toMatrix(items, 3);

items_columns.forEach(function(item) {
	var column = $('<div/>', {class: 'column'});
	$('.columns').append(column.append(item));
});