JSFiddle - React, Tailwind, and code Playground
HTML
<!--
Add class 'wide' to profile
-->
<div class="profile">
<div class="wrapper"> <div class="module even smaller"></div>
<div class="module odd "></div>
<div class="module even"></div>
<div class="module odd"></div>
<div class="module even wide"></div>
</div>
</div>
CSS
*{
border: none;
margin: 0px;
padding: 0px;
outline: none;
}
.profile {
width: 100%;
height: 100%;
background-color: #eee;
overflow: hidden;
}
.wrapper {
margin: 25px 25px 0 25px;
overflow: hidden;
clear: both;
}
.module {
width: 49%;
height: 300px;
background-color: #ddd;
margin-bottom: 25px;
}
.module.odd{
margin-right: 1%;
clear: left;
float: left;
}
.module.even{
margin-left: 1%;
clear: right;
float: right;
}
.module.smaller {
height: 150px;
}
.ghost{
clear: both;
width: 100%;
background-color: #ccc;
height: 0px;
margin: 0px;
}
.module.wide{
float: none;
clear: both;
width: 100%;
background-color: #ccc;
margin: 0px 0px 25px 0px;
}
.profile.wide .module{
min-width: 100%;
max-width: 100%;
clear: both;
float: none;
margin: 0px 0px 25px 0px;
}
JavaScript
/*
var modules = ["albuns", "feed", "songs", "events", "videos"],
wideModules = ["albuns"],
output = '<div class="profile"><div class="wrapper"><div class="ghost"></div>',
i = 0,
len = modules.length;
for (i; i < len; i += 1) {
if (i === len - 1 && i % 2 !== 0) {
output += '<div class="' + modules[i] + ' module wide"></div>';
break;
}
if (wideModules.indexOf(modules[i]) !== -1) {
output += '<div class="' + modules[i] + ' module wide"></div>';
} else if (i % 2 === 0) {
output += '<div class = "' + modules[i] + ' module even"></div>';
} else {
output += '<div class="' + modules[i] + ' module odd"></div>';
}
}
output += '</div ></div>';
$('body').html(output) */