Menu icon Foundation
Creating a grid layout with different heights

I am trying to achieve a layout like on the image below. My cms (Joomla!) outputs articles in a specific order and I tried building with a block-grid and using columns within one row... no success yet... Any ideas?

Illustration

            <!-- USING BLOCK GRID -->

<div class="row small-up-1 medium-up-2 ">
    <?php foreach ($this->lead_items as &$item) : ?>
		<div class="column" >
    	 // OUTOUT   
		</div>
    <?php endforeach; ?>
</div>




<!-- USING COLUMNS -->

<div class="row ">
    <?php foreach ($this->lead_items as &$item) : ?>
    	<div class="small-12 medium-6 large-4 column" >
    	 // OUTOUT   
		</div>
    <?php endforeach; ?>
</div>

gridflex-gridblock-grid

I am trying to achieve a layout like on the image below. My cms (Joomla!) outputs articles in a specific order and I tried building with a block-grid and using columns within one row... no success yet... Any ideas?

Illustration

            <!-- USING BLOCK GRID -->

<div class="row small-up-1 medium-up-2 ">
    <?php foreach ($this->lead_items as &$item) : ?>
		<div class="column" >
    	 // OUTOUT   
		</div>
    <?php endforeach; ?>
</div>




<!-- USING COLUMNS -->

<div class="row ">
    <?php foreach ($this->lead_items as &$item) : ?>
    	<div class="small-12 medium-6 large-4 column" >
    	 // OUTOUT   
		</div>
    <?php endforeach; ?>
</div>

James Lin over 3 years ago

I'm running into something like this as well where if you use one row, and many it just keeps pushing stuff to the right. I guess Foundation wasn't designed to neatly stack things to the left.

I tried finding a solution for you but the best I could come up with was adding "float-left" on every repeating div. So something like

<div class="small-12 medium-6 large-4 column float-left" >

It's not perfect, especially if you have one very long column (though if it's text heavy perhaps cutting it off at a certain point to make it so it's not as long). If the articles are closer in size though the float-left might do the trick.

This little trick helped me with my project (http://marketstreetprototyping.org/prototypes/) where I have the items go neatly to the left when I resize down from large to medium. But it works because it has the same size heights using the built in equalizer thing (very handy).

Remco Janssen over 3 years ago

@James Lin thanks for your sugestion, but my problem is that the divs are not the same height, and I don't want them to be. What I did now is create 3 columns and if I have e.g. 9 items I place 3 in each of them. But I would have liked to use this code:

<div class="row">
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
<div class="small-12 medium-4 column">
</div>
</div>

And have that result in 3 columns like in the image above...
But somehow the top of 4th item (which ends up on the left after the first three) is aligned with the bottom of the 3th, in stead of the bottom of the 1st