Massive spacing on Foundation for Apps framework basic skeleton

Question

I'm using Foundation for Apps (Not Foundation for Sites) and I'm having an issue where there is a lot of blank spacing on my divs.

I am using their new Grid System, which uses flexbox. I 'thought' I was using their system correctly.

To help understand what I did, I have provided the code in jsfiddle: https://jsbin.com/nekubu/edit?html,css,output

Could someone help point out why there is all this spacing? I suspect I am using this grid system in the wrong way, but the docs and examples are not extensive enough to get a good use case relevant to mine.

Background context:

First I added grid-blocks for 'rows' and grid-content for 'columns' as per the Bootstrap idea and then following them saying exactly in the Foundation for Apps docs. But then I realise this looked like it went totally wrong, as every div was scrollable and bunches together.

Content Blocks - Grid - Foundation for Apps Docs

"If basic blocks are the rows of a Foundation for Apps layout, then content blocks are the columns. They can be sized and re-ordered just like normal blocks, but they're meant to house actual content, not just more blocks."

So now I have the code you see in this jsfiddle. However, now there is all this spacing. I have tested this in Firefox and Chrome, and both have this issue.

• Code: https://jsbin.com/nekubu/edit?html,css,output
• Preview: https://jsbin.com/nekubu

Answer 1

The main problem with your code is that inside the div element with the class of main-page are 4 elements that each of them has a sizing classes that want to fill up the entire grid.

Inside a parent element container you can have elements that sum up to 12 and you assign 4*12 (4 child div elements with small-offset-1 and small-11 each). Also the vertical class that you assign to the parent container makes the elements stretch vertically and that's why you see all that spacing.

I've modified your example to this link just to give you an alternative approach: https://jsbin.com/falojitalu/edit?html,css,output