Menu icon Foundation
How to get columns to flow to additional rows?

I'd like to have columns in rows flow to additional rows based on browser widths.

So say rows have 3 columns on a large screen. On a medium screen I'd like rows to have 2 columns. Right now, leaves an "orphaned" item because there are 3 items on a row of two columns.

I'd like that 3rd item to start on the second row and have the next set of items start on that same row.

I've attached an example of what I'm trying to pull off.

Example

columnsRows

I'd like to have columns in rows flow to additional rows based on browser widths.

So say rows have 3 columns on a large screen. On a medium screen I'd like rows to have 2 columns. Right now, leaves an "orphaned" item because there are 3 items on a row of two columns.

I'd like that 3rd item to start on the second row and have the next set of items start on that same row.

I've attached an example of what I'm trying to pull off.

Example

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan almost 6 years ago

Hi Josh,

Here is a rudimentary example, which you can adapt to suit your needs:

   <div class="row">
    <div class="medium-6 large-4 columns">
     <div class="color1"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color1"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color1"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color2"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color2"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color2"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color3"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color3"></div>
    </div>
    <div class="medium-6 large-4 columns medium-pull-6 large-reset-order">
     <div class="color3"></div>
    </div>
   </div>
    <style type="text/css">

  .color1
  {
    background-color: rgb(255, 0 , 0);
    height:  50px;
    margin: 1px;
  }
  .color2
  {
    background-color: rgb(0, 255, 0);
    height:  50px;
    margin: 1px;
  }
  .color3
  {
    background-color: rgb(0, 0, 255);
    height: 50px;
    margin: 1px;
  }

  </style>

Just add you own classes, replacing .color1, .color2, .color3; and adapt the height and the margins.
If you need to add more columns, change the classes of the wrapping <div> as necessary.

Wing-Hou Chan almost 6 years ago

Hi Josh,

Here is a rudimentary example, which you can adapt to suit your needs:

   <div class="row">
    <div class="medium-6 large-4 columns">
     <div class="color1"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color1"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color1"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color2"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color2"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color2"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color3"></div>
    </div>
    <div class="medium-6 large-4 columns">
     <div class="color3"></div>
    </div>
    <div class="medium-6 large-4 columns medium-pull-6 large-reset-order">
     <div class="color3"></div>
    </div>
   </div>
    <style type="text/css">

  .color1
  {
    background-color: rgb(255, 0 , 0);
    height:  50px;
    margin: 1px;
  }
  .color2
  {
    background-color: rgb(0, 255, 0);
    height:  50px;
    margin: 1px;
  }
  .color3
  {
    background-color: rgb(0, 0, 255);
    height: 50px;
    margin: 1px;
  }

  </style>

Just add you own classes, replacing .color1, .color2, .color3; and adapt the height and the margins.
If you need to add more columns, change the classes of the wrapping <div> as necessary.