Menu icon Foundation
block-grid of non equal height

In foundation 6 how can one make a block grid of non equal height?

Block grid non equal height

So all the bottom grey blocks moves up to where the orange blocks are, instead of being on their own newline

<div class="row small-up-1 medium-up-6 large-up-4">
	<div class="column column-block f1" style="height: 100px;">
		<div>
			<h1>block 1</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1" style="height: 250px;">
		<div>
			<h1>block 2</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1">
		<div>
			<h1>block 3</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1" style="height: 175px;">
		<div>
			<h1>block 4</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1">
		<div>
			<h1>block 5</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1">
		<div>
			<h1>block 6</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1">
		<div>
			<h1>block 7</h1>
			<p></p>
		</div>
	</div>
</div>

If this isint possible with foundation, do anyone know of a technique for creating this layout?

Thanks in advance

Kind regards

block-gridgrid

In foundation 6 how can one make a block grid of non equal height?

Block grid non equal height

So all the bottom grey blocks moves up to where the orange blocks are, instead of being on their own newline

<div class="row small-up-1 medium-up-6 large-up-4">
	<div class="column column-block f1" style="height: 100px;">
		<div>
			<h1>block 1</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1" style="height: 250px;">
		<div>
			<h1>block 2</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1">
		<div>
			<h1>block 3</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1" style="height: 175px;">
		<div>
			<h1>block 4</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1">
		<div>
			<h1>block 5</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1">
		<div>
			<h1>block 6</h1>
			<p></p>
		</div>
	</div>
	<div class="column column-block f1">
		<div>
			<h1>block 7</h1>
			<p></p>
		</div>
	</div>
</div>

If this isint possible with foundation, do anyone know of a technique for creating this layout?

Thanks in advance

Kind regards

Rafi Benkual about 2 years ago

The purpose of the block grid is to clear the floats for a traditional float grid. This means the next line will be below the prior line.

You could more easily accomplish this with a vertical column system like this:

http://foundation.zurb.com/building-blocks/blocks/masonry-css.html

 

Can you share an example of what you're trying to build to se we can show you another way?