Menu icon Foundation
Can a column contain multiple rows?

In most foundation examples, a column contains one row. My question is, can a column contain multiple rows? Is following code right?

<div class="row">
  <div class="small-3 columns">
    a
  </div>

  <div class="small-9 columns">      /* This columns contains 3 rows.  */
    <div class="row">
      <div class="small-12 columns">
        b
      </div>
    </div>
    <div class="row">
      <div class="small-5 columns">
        c
      </div>
      <div class="small-7 columns">
        d
      </div>
    </div>
    <div class="row">
      <div class="small-6 columns">
        e
      </div>
      <div class="small-6 columns">
        f
      </div>      
    </div>	
  </div>
</div>
            

         

column row

In most foundation examples, a column contains one row. My question is, can a column contain multiple rows? Is following code right?

<div class="row">
  <div class="small-3 columns">
    a
  </div>

  <div class="small-9 columns">      /* This columns contains 3 rows.  */
    <div class="row">
      <div class="small-12 columns">
        b
      </div>
    </div>
    <div class="row">
      <div class="small-5 columns">
        c
      </div>
      <div class="small-7 columns">
        d
      </div>
    </div>
    <div class="row">
      <div class="small-6 columns">
        e
      </div>
      <div class="small-6 columns">
        f
      </div>      
    </div>	
  </div>
</div>
            

         
Marko A about 4 years ago

Yes it can.

You can try out examples in codepen. Just add foundation in settings. I have made a pen out of your example so you can see how to add it. Just check settings and it requires 1 line of javascript code.

http://codepen.io/anon/pen/dYYJGo

Btw this is not a comment in html or css, only in javascript.
/* This columns contains 3 rows. */

This is text that is directly outputed.

Mike T about 4 years ago

Thank you Marko for your answer! it's helpful. Now I know that a column can contain multiple rows.

in HTML, the comment should be <!-- -->, I wrote /* */ in the code above by mistake. Thank you!