I use JQuery Packery which works fine.
The question that occurs to me is how can I center the item container on my page?
<div id="container">
<div class="item">...</div>
<div class="item w2">...</div>
<div class="item">...</div>
...
</div>
I tried css:
#container {
marin: 0 auto;
}
but this does not work.
DeSandro already has an example of a centered packery layout.
The example is here.
Basically it is just centered via CSS. I'm copying the code here too:
HTML:
<h1>Packery - centered</h1>
<div class="packery js-packery" data-packery-options='{ "gutter": ".gutter-sizer", "itemSelector": ".item", "columnWidth": ".grid-sizer" }'>
<div class="gutter-sizer"></div>
<div class="grid-sizer"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.packery {
background: #FDD;
background: hsla(45, 100%, 40%, 0.2);
max-width: 480px;
margin: 0 auto;
}
/* clearfix */
.packery:after {
content: ' ';
display: block;
clear: both;
}
.gutter-sizer {
width: 2%;
}
.grid-sizer {
width: 18.4%;
}
.item {
width: 18.4%;
height: 60px;
float: left;
background: #C09;
border: 4px solid #333;
border-color: hsla(0, 0%, 0%, 0.3);
}
.item.w2 { width: 38.8%; background: #9C0; }
.item.h2 { height: 120px; background: #0C9; }
have a look at this.. this does what you need..
http://codepen.io/anon/pen/Dbpzu