Menu icon Foundation
Block Grids with Multiple Widths

Hello-

I'm trying to create a flow of blog posts using the block grid, but I'd like the first post to be double the width of the rest of the posts. Is there a way I'm just not seeing of making one of the items in a block grid a different column width than the others

Something like this:

<div class="row small-up-1 medium-up-2 large-up-4">
	<div class="medium-6 column">
		<h1>Header</h1>
		<p>This is content.</p>
	</div>
	<div class="column">
		<h2>Header</h2>
		<p>This is content.</p>
	</div>
	<div class="column">
		<h2>Header</h2>
		<p>This is content.</p>
	</div>
	...
</div>

I've tried just using the normal grid:

<div class="row">
	<div class="medium-6 column">
		<h1>Header</h1>
		<p>This is content.</p>
	</div>
	<div class="medium-3 column">
		<h2>Header</h2>
		<p>This is content.</p>
	</div>
	<div class="medium-3 column">
		<h2>Header</h2>
		<p>This is content.</p>
	</div>
	...
</div>

But, that breaks as soon as you have shorter content than the previous item.

Any help would be appreciated, thanks!

block gridgridcolumnlayoutblock grid flowcolumn flow

Hello-

I'm trying to create a flow of blog posts using the block grid, but I'd like the first post to be double the width of the rest of the posts. Is there a way I'm just not seeing of making one of the items in a block grid a different column width than the others

Something like this:

<div class="row small-up-1 medium-up-2 large-up-4">
	<div class="medium-6 column">
		<h1>Header</h1>
		<p>This is content.</p>
	</div>
	<div class="column">
		<h2>Header</h2>
		<p>This is content.</p>
	</div>
	<div class="column">
		<h2>Header</h2>
		<p>This is content.</p>
	</div>
	...
</div>

I've tried just using the normal grid:

<div class="row">
	<div class="medium-6 column">
		<h1>Header</h1>
		<p>This is content.</p>
	</div>
	<div class="medium-3 column">
		<h2>Header</h2>
		<p>This is content.</p>
	</div>
	<div class="medium-3 column">
		<h2>Header</h2>
		<p>This is content.</p>
	</div>
	...
</div>

But, that breaks as soon as you have shorter content than the previous item.

Any help would be appreciated, thanks!

Rafi Benkual almost 3 years ago

Block grid is specifically for equal width blocks. It makes more sense to create another row and columns as you exceed 12 columns or you would be manually clearing floats.

Rafi Benkual almost 3 years ago

Now flexbox may be better suited to do this since you can control the wrapping.