Packery Tiles with Bootstrap
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Aug 28, 2015, 11:46:59 PM
Author : ADITYAM GHOSH
*/
html, body{
width:100%;
height:100%;
}
*{
position: relative;
}
.packery{
width: 100%;
min-height: 400px;
}
.no-padding{
padding: 0 !important;
}
.padding-left-0{
padding-left: 0 !important;
}
.padding-right-0{
padding-left: 0 !important;
}
.packery .row{
margin-left:0;
margin-right: 0;
}
.box{
overflow: hidden;
display: block;
}
/*div[class*="col-"]{
float:left;
min-height:30px;
}*/
.box{
float:left;
min-height:150px;
}
.box.col-1{
background: #FFEA0E;
width:40%;
width:calc(0.40 * 100%);
width:-webkit-calc(0.40 * 100%);
}
.box.col-2{
background:#0D72FF;
width:30%;
width:calc(0.30 * 100%);
width:-webkit-calc(0.30 * 100%);
}
.box.col-2by3{
background:#00E8C9;
width:30%;
width:calc(0.30 * 100%);
width:-webkit-calc(0.30 * 100%);
}
.box.col-3{
background:#FF0000;
width:30%;
width:calc(0.30 * 100%);
width:-webkit-calc(0.30 * 100%);
}
.box.col-3by3{
background:#FFD53D;
width:30%;
width:calc(0.30 * 100%);
width:-webkit-calc(0.30 * 100%);
}
.box.col-4{
background:#860CE8;
width:40%;
width:calc(0.40 * 100%);
width:-webkit-calc(0.40 * 100%);
}
<section class="packery">
<div class="container-fluid no-padding">
<div class="row no-padding">
<div class="box col-1">
Inspired by: http://stackoverflow.com/questions/23763092/packery-positionering-with-bootstrap
</div>
<div class="box col-2">
jhjhj
</div>
<div class="box col-2by3">
klkklkl
</div>
<div class="box col-3">
uyuyuyu
</div>
<div class="box col-3by3">
nmnmnmn
</div>
<div class="box col-4">
vbvbvb
</div>
</div>
</div>
</section>