Very simple CSS-only masonry for Meteor using css column-count and column-gap
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 2 commits behind bobbigmac:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Very simple css-only masonry layout using css3's column-count and column-gap. Doesn't rely on fixed heights, intended to work with Meteor/Blaze without having to bind up rendered handlers to tie in isotope (and all the management/cleanup that comes with that whole mess).

Responsive and increases column-count at Bootstrap breakpoint dimensions, though will work just fine without Bootstrap.

I use this layout in a lot of projects so this is basically just a starting-point and something to refer to, override with your desired margins/column-counts as needed. Check the source, it's not fancy.

CSS columns are pretty well supported:


<div class="masonry-wall">
	<div class="masonry-brick">
		<h1>Some big content<br /><br/>More stuff</h2>
	<div class="masonry-brick masonry-no-break"><!-- will not wrap content to next column-->
		<h6>Some <small>not as big</small> content</h6>
	<!-- etc -->

or to be a bit more bootstrappy...

<div class="masonry-wall">
	{{#each someThingsHavePictures}}
		<div class="masonry-brick">
			<div class="panel panel-default">
				<div class="panel-heading"><h2 class="panel-title">{{}}</h2></div>
				{{#if this.img}}
					<div class="panel-body">
						<img class="panel-image" src="{{this.img}}" />

Cap column-count

Added in 1.0.0... cap the number of columns (i.e. don't use 4 columns at max-res) by applying to .masonry-wall class of masonry-cap-1, masonry-cap-2 or masonry-cap-3.


Based entirely on


Any feedback and PRs welcome