isotope packery layout ideal item sizes - layout

Question

I am trying to make a nice layout of items in a grid using a bin packing algorithm like packery or masonry. I Already have isotope installed so will use the packery plugin for that.
If you look at the example here http://codepen.io/desandro/pen/vdwmb this is exactly the kind of thing I need, but the problem I think I'm going to face is the content of the items are via a CMS.
<h1>Isotope - packery layout mode</h1>
<div class="grid">
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
* { box-sizing: border-box; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 100px;
height: 100px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }
$('.grid').isotope({
layoutMode: 'packery',
itemSelector: '.grid-item'
});
Possibly more of a maths question, but Im assuming for packery to work the items all have to be of a size in relation to each other, ie in the example above all the items are multiples of the smallest item.
Is this assumption correct, and is there anything else i need to consider?