How can I build a nested grid of photos in Foundation? - html

Question

JSFiddle: https://jsfiddle.net/s0m142c4/
I am trying to use foundation's grid to build a grid of photos.
I want it to look like this with all of the blocks representing photos.
:
I am, as foundation's documentation suggests, nesting two columns inside of one column, and the third column just contains its image.
HTML:
<div class="row grid-row">
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns grid-img port">
<img src="img/tile1-new.jpg" />
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-4 columns grid-img land">
<img src="img/tile7.jpg" />
</div>
<div class="large-4 columns grid-img land">
<img src="img/tile3.jpg" />
</div>
</div>
<div class="row">
<div class="large-4 columns grid-img">
<img src="img/tile7.jpg" />
</div>
<div class="large-4 columns grid-img">
<img src="img/tile3.jpg" />
</div>
</div>
</div>
</div>
CSS:
.grid-img{
text-align: center;
}
.grid-img img{
min-width:90%;
}
.grid-img.port img{
min-width:100%;
}
.grid-row{
height:600px;
}
But it's coming out like this instead:
Any idea how to get the images to fill their nested columns and maintain a padded grid like my example?

Answer 1

This is very close, you needed to use 100% width for the images and then change large-4 columns to large-6 as they were never going to take up 50% each which they needed to do.
You can now tweak bottom margin to make the layout work a little bit better. There's a really geeky way to do this which is Masonry.js or Isotope.js, it resizes containers, but might be a bit heavy handed to do what html and css can do pretty well. See below:
/*.grid-img {
text-align: center;
}
.grid-img img {
min-width: 90%;
}
.grid-img.port img {
min-width: 100%;
}
.grid-row {
height: 600px;
}
*/
.grid-img img {
width: 100%;
margin-bottom: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.0/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.0/foundation.min.css" rel="stylesheet" />
<div class="row grid-row">
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns grid-img port">
<img src="http://placehold.it/600x600" />
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-6 columns grid-img land">
<img src="http://placehold.it/600x600" />
</div>
<div class="large-6 columns grid-img land">
<img src="http://placehold.it/600x600" />
</div>
</div>
<div class="row">
<div class="large-6 columns grid-img">
<img src="http://placehold.it/600x600" />
</div>
<div class="large-6 columns grid-img">
<img src="http://placehold.it/600x600" />
</div>
</div>
</div>
</div>