CODEWITHSUNDEEP
zurb-foundation
daino3
daino3

Reputation: 4566

Make Foundation columns span multiple "rows" of columns

This could be an incredibly dumb question, but I'm at a loss on how to make 3 sets of columns line up with foundation's grid.

Here's the js fiddle

HTML 

<div class="row">
  <div class="medium-9 columns">
    <div class="medium-4 columns" style="height: 250px; background: green;"></div>
    <div class="medium-4 columns" style="height: 250px; background: blue;"></div>
    <div class="medium-4 columns" style="height: 250px; background: red;"></div>
  </div>
  <div class="medium-9 columns">
    <div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
    <div class="medium-4 columns" style="height: 250px; background: orange;"></div>
    <div class="medium-4 columns" style="height: 250px; background: purple;"></div>
  </div>
  <div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>

I want the black column to line up with the first "row" of columns without making the position of .row container relative and the medium-3 columns div absolute.

Furthermore, why doesn't this work like I assumed it would? Isn't a situation like this the whole point of a grid system?

Thanks!

Upvotes: 1

Views: 2965

Answers (2)

Judo_Guy07
Judo_Guy07

Reputation: 1

The reason your fiddle is off is because each row needs to be 12 columns in length. If a row consists or more than 12 columns, the element that overflows then wraps to the next row, even if a row is not declared.

<div class="row">
  <div class="medium-9 columns">
  ...
  </div>
  <div class="medium-9 columns">
  ...
  </div>
  <div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>

Your second div in the row makes these columns add up to 18 so it pushes it to the next level down. This is why last div of 3 columns appends to the end of your second div of 9 columns.

To get the layout you want, you'll need to have nested rows and ensure that each row adds up to 12 columns.

<div class="row">
  <div class="medium-9 columns">
    <div class="row">
      <div class="medium-4 columns" style="height: 250px; background: green;"></div>
      <div class="medium-4 columns" style="height: 250px; background: blue;"></div>
      <div class="medium-4 columns" style="height: 250px; background: red;"></div>
    </div>
    <div class="row">  
      <div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
      <div class="medium-4 columns" style="height: 250px; background: orange;"></div>
      <div class="medium-4 columns" style="height: 250px; background: purple;"></div>
    </div>
</div>
<div class="medium-3 columns" style="height: 500px; background: black;"></div>

Upvotes: 0

Knut Holm
Knut Holm

Reputation: 4162

You are close. The right solution should be like this (Fiddle):

<div class="row">
  <div class="medium-9 columns">
      <div class="row">
        <div class="medium-4 columns" style="height: 250px; background: green;"></div>
        <div class="medium-4 columns" style="height: 250px; background: blue;"></div>
        <div class="medium-4 columns" style="height: 250px; background: red;"></div>
      </div>
      <div class="row">  
        <div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
        <div class="medium-4 columns" style="height: 250px; background: orange;"></div>
        <div class="medium-4 columns" style="height: 250px; background: purple;"></div>
      </div>
  </div>
  <div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>

Upvotes: 1

Related Questions