Foundation5 grid aligning according to one another - html

Question

I've been working with one problem way too long and haven't found any proper solution to it. I'm currently working with grid product display on foundation5 framework and can't find proper jscript or css code to align my product accordingly to one another.
Here's how it looks now :
I need to look like this atleast :
I need bigger product windows below to fill above smaller windows blank space.
Hope somebody would be able to help, thanks!

Answer 1

If you know divs height it's pretty easy, just add position: relative to your bigger div and move it upper.
If you don't it is very similar but you have to set height of the divs and the offset of the bigger one by JavaScript.
HTML
<div class="row">
<div class="small-4 column">
<div class="inner"></div>
</div>
<div class="small-4 column">
<div class="inner"></div>
</div>
<div class="small-4 column">
<div class="inner small"></div>
</div>
</div>
<div class="row">
<div class="small-4 column">
<div class="inner"></div>
</div>
<div class="small-4 column">
<div class="inner"></div>
</div>
<div class="small-4 column">
<div class="inner big"></div>
</div>
</div>
SASS
$div-height: 200px;
$big-div-height: 250px;
$small-div-height: 100px;
div.inner {
height: $div-height;
background: #99CCFF;
border: 3px solid black;
border-radius: 25px;
}
div.row {
margin-top: 25px;
}
div.big {
height: $big-div-height;
position: relative;
top: $div-height - $big-div-height;
}
div.small {
height: $small-div-height;
}
CodePen example

Answer 2

You can't easily make the Foundation grid do that (it provides a regular grid, that's what it's for). However you could create a div inside the relevant grid column(s) to hold your content, and position that absolutely to get what you want.
Give the containing grid column position: relative, then give your new div inside a class name something like my-class, then do:
.my-class {
position : absolute;
bottom : 0;
left : 0;
width : [same percentage width of the screen as your other columns]
}
Now, since that cell's content will have been taken out of the content flow, the containing row will be able to close up to just be the height of the largest of the remaining grid cells (ie the ones that have not been positioned absolutely), and your content will be positioned on the bottom of that row, extending up as far as it needs.
Just check the height of the smaller cell above, plus the larger cell below, don't exceed the height of the two rows together, or you might have to something extra to cater for that.