Menu icon Foundation
automatically generate rows

I was wondering if there was a simple way to automatically generate rows when the column count reaches 12 or would surpass 12. I've built an option to choose the column count via the CMS but the result ends up stacking all the .columns divs like so:

<div id="work">
  <div class="large-8 large-offset-4 columns projects"></div>
  <div class="large-6 large-offset-0 columns projects"></div>
  <div class="large-6 large-offset-0 columns projects"></div> 
  <div class="large-4 large-offset-0 columns projects"></div>
  <div class="large-8 large-offset-0 columns projects"></div>
  <div class="large-12 large-offset-0 columns projects"></div>
</div>
            

         

ideally I would like the result to look like this:

<div id="work">
  <div class="row"> 
    <div class="large-8 large-offset-4 columns projects"></div>
  </div> 
  <div class="row"> 
    <div class="large-6 large-offset-0 columns projects"></div>
    <div class="large-6 large-offset-0 columns projects"></div>
  </div>
  <div class="row"> 
    <div class="large-4 large-offset-0 columns projects"></div>
    <div class="large-8 large-offset-0 columns projects"></div>
  </div>
  <div class="row"> 
    <div class="large-12 large-offset-0 columns projects"></div>
  </div> 
</div>
            

         

I'm working on a complex javascript solution, but I thought maybe there is something built in or some sort of plugin out there...

Rows

I was wondering if there was a simple way to automatically generate rows when the column count reaches 12 or would surpass 12. I've built an option to choose the column count via the CMS but the result ends up stacking all the .columns divs like so:

<div id="work">
  <div class="large-8 large-offset-4 columns projects"></div>
  <div class="large-6 large-offset-0 columns projects"></div>
  <div class="large-6 large-offset-0 columns projects"></div> 
  <div class="large-4 large-offset-0 columns projects"></div>
  <div class="large-8 large-offset-0 columns projects"></div>
  <div class="large-12 large-offset-0 columns projects"></div>
</div>
            

         

ideally I would like the result to look like this:

<div id="work">
  <div class="row"> 
    <div class="large-8 large-offset-4 columns projects"></div>
  </div> 
  <div class="row"> 
    <div class="large-6 large-offset-0 columns projects"></div>
    <div class="large-6 large-offset-0 columns projects"></div>
  </div>
  <div class="row"> 
    <div class="large-4 large-offset-0 columns projects"></div>
    <div class="large-8 large-offset-0 columns projects"></div>
  </div>
  <div class="row"> 
    <div class="large-12 large-offset-0 columns projects"></div>
  </div> 
</div>
            

         

I'm working on a complex javascript solution, but I thought maybe there is something built in or some sort of plugin out there...

Rafi Benkual over 4 years ago

There isn't anything to my knowledge. You would definitely need JS to do this. Not sure what the use case is though.

There is a block-grid form dynamic content.