Masonry Grid

Posted onby admin

Uk-grid-margin: This class is added to items that break into the next row, typically to create margin to the previous row. First-column: String: uk-first-column: This class is added to the first element in each row. Masonry: Boolean: false: Enables masonry layout for this grid. Parallax: Number: 0: Parallax translation value. The value must be. True HTML CSS Masonry with grid layout. This model is presumably the most unpredictable and the.

Pinterest has inspired many to do masonry-based layouts on their sites. We already have some solid JavaScript alternatives out there to create masonry layouts. How about doing pure CSS masonry layouts?

Before moving any further, I have some updates for you about my experiments with CSS masonry:

After the launch of Pinterest in 2011, I myself tried creating its lookalike with plain CSS. I started off by using CSS floats, then tried inline-blocks, ended up in a messed up layout with tables.

Not exactly tables, but the table display properties. All I got was equal-height columns, which is definitely not a masonry. Later on, I got success with it using some rarely-used CSS properties.

The secret CSS recipe for Masonry Layout

Not a secret actually, some people have already written about it. Before going further, I would like to show you with a demo of what we are going to create:

About the secret, I discovered this technique while experimenting with CSS column properties. I also contributed the outcome of this experiment to a WordPress plugin later on, which was a hit back then.

Breaking cover, I’m talking about the CSS multi-column layout module. Or aka the masonry magic wand.

This module allows us to present blocks as part of virtual columns. Multi-column properties column and column-count collectively lay down the foundation of our masonry.

After that, we will also be adding gutter to our masonry with column-gap, its another property.

Note: Gutter is the space between the masonry items.

If you are okay with HTML and CSS, this tutorial is going to be easy for you. Let’s jump into the code mess.

The column-count property

CSS column-count allows you to add a specific number of adjacent columns to any block element. The child elements inside the block get aligned as per the specified number of columns.

And this gives an effect of a masonry layout, without any involvement of JavaScript. Read more on column-count here.

What about spacing between the grid items? The column-gap property solved the gutter problem.

HTML

Masonry

Let’s start with the markup. It’s nothing but a box with a bunch of objects or items thrown inside.

As you can see above, the .masonry division acts as the masonry container and each .item acts as the masonry item.

I’ve used some sample data too in the demo page for a practically-better demonstration.

CSS

Now comes the most fun and important part, i.e. the CSS.

We perform the following tasks with the above CSS:

  1. Apply the column-count property to the container. Because we want to automatically arrange the items in a masonry-fashion.
  2. Set the items as inline blocks with 100% width. Because we want to fit the items properly inside the masonry columns.

That’s the basic idea. We end up getting something like this demo consequently.

Fallback?

Masonry Grid

Extensive support? CSS columns are robust enough, as they are widely supported by modern browsers. You may however consider adding a JavaScript fallback of your choice to make it even better.

Proceed like this to use a JavaScript masonry solution as a fallback to our CSS masonry in IE9 or below:

This basic masonry is device-friendly. It doesn’t create scroll-bars on zooming-in, as none of its elements has any fixed width. But still, we can make it look different on different resolutions.

Responsive CSS masonry

Masonry grid template

Masonry Grid Bootstrap

Along with the responsiveness, I tried to make it look better than our basic demo. Simply modify the column-count for different screen breakpoints with the help media queries.

Note that I make use of box-sizing reset in all my examples here. Here is the CSS snippet that I used to revamp our masonry:

Styling

The markup is pretty much the same because this is an extension of the previous example.

I’ve used more images in this one as a result of which the demo has become more attractive. You can see the full markup in the page source.

Caveats

The only drawback of this technique is that the masonry tiles don’t flow from left to right or right-to-left. Some of the top comments I received on this post were about obtaining a horizontal flow in the layout.

Unfortunately, the left-to-right flow is beyond the scope of CSS Multi-column Layout Module.

Fixes

  • Many people complained about the disappearing of image on hover in the final masonry. I fixed it by setting backface-visibility to hidden.
  • Some other layout problems disappeared on setting vertical-align as middle for the images.

In Conclusion

To sum up, we created a CSS-only masonry with the help of multi-column layout module. I was not 100% satisfied with this solution, as the masonry you get with it is top-to-bottom, not left-to-right.

For a horizontal masonry solution, read my latest experiment called CSS Grid Masonry.

Updates

A 100% CSS-only solution is still non-existent for a horizontal masonry. However you may take a look at how a tiny bit of JavaScript does magic to bring about a masonry with CSS Grid layout.

Next comes our reader friends who are very new to CSS and HTML, or want to generate the layout rather than coding.

I created this utility for non-coders to create their own masonry without having to code.

One can customize, colorize, and preview the masonry, and can grab the code or download it in zipped. Good thing is that it’s 100% free!

And that’s pretty much it! Share it ahead if it was useful or interesting. And as always, I welcome your thoughts, questions, and suggestions in the comments.

Masonry Grid Webflow

Read further