Make Foundation columns span multiple "rows" of columns -
this incredibly dumb question, i'm @ loss on how make 3 sets of columns line foundation's grid.
here's 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 black column line first "row" of columns without making position of .row
container relative , medium-3 columns
div absolute.
furthermore, why doesn't work assumed would? isn't situation whole point of grid system?
thanks!
you close. right solution should (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>
Comments
Post a Comment