CSS images not aligning properly leaving empty spaces - html

Question

I am not sure how to explain this at all other than showing the problem. I have the following code:
#photoBox {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-break-inside: avoid; /* Chrome, Safari */
page-break-inside: avoid; /* Theoretically FF 20+ */
break-inside: avoid-column; /* IE 11 */
display:table; /* Actually FF 20+ */
}
#photoBox img{
width: 100% !important;
height: auto !important;
display: block;
}
#photoBox .photo{
position: relative;
float: left;
box-shadow:
0px 0px 0px 2px rgba(0,0,0,0.6),
0px 0px 0px 14px #fff,
0px 0px 0px 18px rgba(0,0,0,0.2),
6px 6px 8px 17px #555;
margin: 25px;
}
#photoBox .title {
position: absolute;
background-color:rgba(255,255,255,0.7);
color: #000;
text-align: center;
font-weight: bold;
width: 100% !important;
bottom: 0;
}
I get the following results:
What i would like to get is the images to "fill in all the spaces"
Like so:
I was able to do this in the second screen using a mess of tricks that will not allow me to use my current styling to work at all.
Can someone guide me with what i am doing wrong with this CSS to get my desired results?
Thanks!
JAC

Answer 1

Use masonry jquery library to handle the problem:
Include masonry
script src="/path/to/masonry.pkgd.min.js"
2.If you have the following html:
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item grid-item--width2">...</div>
<div class="grid-item">...</div>
...
</div>
3.Then your script should be like:
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 200
});
4.And the CSS:
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }