Masonry not working with different sized items - jquery-masonry

Question

Not really a code/script guy, so bare that in mind. I'm doing a simple page for my photos. I'm wanting to break it up a bit by having one image double the size. One image being 125px and the larger one at 255px. 5px gutter and there is a bottom margin of 5px (thus the larger being 255 and not 250).
What happens is the larger image goes into the the next column and two of the smaller objects will go under it.
This is the goal: what I am trying to do
CSS
#grid {
margin-top:15px;
}
.griditem {
width:125px;
}
.griditem.250 {
width:255px;
}
.griditem img {
margin-bottom:5px;
}
HTML
<div id="grid">
<div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
<div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
<div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
<div class="griditem.250"><img src="images/tableTemp250.jpg" width="255" height="255" /></div>
<div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
<div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
<div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
<div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
<div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
<div class="griditem"><img src="images/tableTemp125.jpg" width="125" height="125" /></div>
</div>
Here is how I initialize it:
<script>
var container = document.querySelector('#grid');
var msnry = new Masonry( container, {
// options
columnWidth: 125,
gutter: 5,
itemSelector: '.griditem'
});</script>

Answer 1

CSS classnames can not contain ".". Your problem is that your class attribute and CSS selector have syntax errors. When you do .griditem.250 {} in your CSS, that corresponds to class="griditem 250" in your HTML. That would mean you have a class called "250", which is not valid as classname (has to start with a letter). In any case class="griditem.250" is wrong. Classes are separated by space when specified in the class attribute. Without space it us just one classname with invalid characters (.).
That also makes masonry skip the big item, because its item selector tries to find "griditem" and not "griditem.250". Try this
// CSS
.griditem {
width: 125px;
...
}
.w255 {
width: 255px; // Override width for that element only
}
// HTML
<li class="griditem w255">...</li>
<li class="griditem">...</li>
<li class="griditem">...</li>