Images/div's overlap each other randomly on load - css

Question

I've got a 3x3 grid built with Zurb's Foundations framework and on load sometimes these boxes overlap each other. The number of image that load normally and the number that does not is completely random. Sometimes it's just one image, sometimes all of them, etc. It also happens more often when you view the website from http:// instead of locally. Just take a look at the image below.
The boxes are responsive, in such way they decrease in size when the browser gets smaller dan 1200px in width. Therefor a static height of each box isn't an option. They do remain the same ratio (4:3).
How do I make them not overlap each other?
I think the issue is the browser renders the boxes quicker than it can render each image- and therefor doesn't take the height into account.
My code for this part looks like this
<div class="row">
<div class="large-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-6 medium-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
</div>

Answer 1

I think this is a classic case for a Foundation block-grid. Just change the class from large-3 to large-block-grid-3.
So your code will look like this:
<div class="row">
<div class="large-block-grid-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-block-grid-6 medium-block-grid-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
You can learn more about Foundation block grid here

Answer 2

I added the .imageLoaded() jQuery plugin and configured it so that only when all images are loaded in the #grid then shuffle.js could load; a plugin that I use for shuffling/filtering the items.
Now, both on reload and clear-cache-full-reload, it works- and is showing correctly.
The problem was that if the plugin is fired before all/any of the image has been loaded, it just gives it a 10px height. Now, by firing the plugin after all images have been loaded, they get shown at their full height.
Strangely though, I applied this suggestion before I changed my grid to a block-grid, as suggested by #Asaf David, it didn't work. Now it does.
++ Credits to #Asaf David, for suggesting the block-grid, although I either can't confirm nor deny this helped. But at least it improved my code, imho.