Menu icon Foundation
Okay, Here's an Easy One (probably)

So, I have been working with Foundation for the last year (having never used Bootstrap prior), and it just occurred to me.  When/why is it time to make a new div/row container?  Obvious to me, a new row will contain a new section or horizontal divider from anything above.  But if I am in a row and my column divs keep adding up to 12 (by default), they will keep reflowing and stacking up properly, right?  Is there any reason to add a new row between each set of columns that total 12?  Is there a "right" and "wrong" way to do it if the page displays properly?  I have taken the beginner class and will hopefully be taking the advanced class later this month.  I have never had the luxury of someone going over best practices with me.

Thanks in advance for your help.

class="row"

So, I have been working with Foundation for the last year (having never used Bootstrap prior), and it just occurred to me.  When/why is it time to make a new div/row container?  Obvious to me, a new row will contain a new section or horizontal divider from anything above.  But if I am in a row and my column divs keep adding up to 12 (by default), they will keep reflowing and stacking up properly, right?  Is there any reason to add a new row between each set of columns that total 12?  Is there a "right" and "wrong" way to do it if the page displays properly?  I have taken the beginner class and will hopefully be taking the advanced class later this month.  I have never had the luxury of someone going over best practices with me.

Thanks in advance for your help.

Rafi Benkual over 2 years ago

If you use the float grid (as opposed the flex grid) - in order for the grid columns to properly clear the floats when  they need to fit side by side a new row is needed. in other words, if you have more than 12 columns per line you'll start to get some weird wrapping as columns can be different heights. (You might get away with more columns in a row if they are similar height)

Example: http://codepen.io/rafibomb/pen/BRJeyK?editors=1000

The block grid does solve this if you want all you columns equal width.

Daren Barry over 2 years ago

To some degree, how often you're using "row" is a personal preference. I know some developers that use row every time there's a clearing of a horizontal row. I tend to use it in sections to make sure things clear (at a minimum header, main, footer) - this of course depends on how much content you have. 

Michael Barthel over 2 years ago

Thank you both for you feedback.  I am glad that I didn't miss some "OFFICIAL RULE" somewhere along the way.  I know many people who start using foundation already have some background in other responsive frameworks, like Bootstrap, and therefor already have a feel for how this should work.  I thought I knew how to use them, but just wanted to verify that I wasn't missing something.

Cheers!