10 Code Snippets for Creating Masonry Grid Layouts

Tumblr and Pinterest popularized the masonry grid. It is a common layout style for variable sized images, and it’s a great way to get images to fit nicely into a grid structure.

If you’ve ever wanted to build a masonry grid layout without all that hard work then you’ve come to the right place.

I’ve collected ten free open source snippets below all featuring custom masonry grid layouts. Easy to copy, easy to edit, and perfect for all developers.

Have a look and see what catches your eye.

1. Masonry Layout (Full JS)

First on my list is this nice design by Maciej Leszczyński.

It features the grid layout we all know & love with custom JS properties. Not to mention it relies on the CSS Grid.

This is a newer property, so not all developers will know how it works, but there’s never a better time to learn than right now!

I’d say this free grid layout is the perfect study tool for breaking into the subject.

2. CSS Grid Columns

Moving away from JavaScript we have a fun masonry layout running on pure CSS code.

The developer Lasse Stilvang created these elements to fit nicely into a simple grid. You can easily edit the styles, colors, and positioning on your own too.

Plus this thing is 100% responsive for all mobile users which is a staple for modern websites.

Pure CSS might be just what you need for a masonry grid that you can trust.

3. Blog-Style Grid

On bigger blogs I often see featured posts in large boxes with custom rectangle shapes. The Mashable homepage comes to mind.

This trend has become wildly popular and it’s exactly what you’ll find in this snippet.

Really this is a mix of content pieces with some smaller image thumbnails, some acting as featured posts, and some as just text boxes for any content you like.

Kreig Durham created this pen as an example of what you can do with a masonry grid that fits tightly in all corners. No margins, no spacing.

This isn’t possible with all image sizes, but it’s a fun trick worth attempting if your layout can handle it.

4. Bootstrap 4 Masonry Layout

Every developer and their grandmother was thrilled for the release of Bootstrap 4. This came with a bunch of awesome code snippets and extra features for developers to create layouts faster.

There’s even a fully functional masonry grid layout running purely on the Bootstrap framework.

This uses a mix of the Bootstrap card component along with this masonry setup. It’s a lot easier to work with than many other snippets here so it’s perfect for newer developers just learning the ropes.

5. Pure CSS

Adam Blum gives us another sweet masonry grid in this pen running entirely on CSS3.

This again uses CSS Grid properties to create the effects and keep the page fully responsive.

Granted this example only uses text boxes to show the effect, so it’s far from perfect.

But I do think it’s one of the better examples in this list that can be used for almost anything.

Even if you don’t fully understand the grid properties just yet, you should still be able to edit this code and get it working however you want.

6. Dynamic Row Spans

I couldn’t be more enthusiastic about this snippet running through the Reddit API and dynamically pulling JSON data.

The pen was developed by Brett Commandeur, and it also uses the CSS grid properties. However the layout is controlled dynamically with JavaScript where content is pulled from the Reddit API.

Most of the content gets shared using the console.log() command so you can look into the response and see how it’s structured too.

Overall a fascinating snippet that not only covers masonry grid design but also a little on API development with JavaScript too.

7. Responsive Masonry Grid

Onto a truly fascinating responsive grid designed just like a traditional masonry layout.

Add images wherever you want, set the heights however you want, this layout will adjust accordingly.

The entire thing runs on CSS and it uses properties like column-count to set the masonry layout for mobile.

I find JS a little more powerful but this is an excellent responsive layout for only HTML & CSS(no Sass required!)

8. React Masonry Grid

Now here’s an interesting approach to masonry running on top of React.

Facebook’s open source framework has taken the web by storm and you can see a brilliant example in this pen by Goran Rakic.

Goran uses only a single HTML element with a ton of React code running on top of Babel.

If you already understand React code this will be a fun project to study. If you want to learn React code, this would be a cool project to recreate from scratch.

Either way, it’s worth a gander.

9. Isotope – horizontalOrder

Coder Dave DeSandro built this interesting pen using the Isotope script.

It handles custom layout designs & custom grids to rearrange your content accordingly. It’s far from the best tool, but it does give you way more control over your layout.

Plus you don’t need to know a lot about frontend coding to work with this library. Seems pretty dreamy for developers who just want to get a masonry layout online fast.

10. True Masonry

This example is probably the most complex and the most intriguing one here.

Developer Balázs Sziklai created true masonry grid on CodePen as a free snippet for the world to find. It does not use any JavaScript and it can handle all screen sizes naturally.

You’ll also notice the design is pretty sleek and the CSS classes leave plenty of room for customization.

If you do know your way around JavaScript, this pen would actually do well with its own custom script. But that would take quite a bit more work, so it’s not going to be everyone’s cup of tea.

Regardless I certainly hope this post can get you started with ideas & examples of masonry grids in real-world web design.

The post 10 Code Snippets for Creating Masonry Grid Layouts appeared first on Speckyboy Web Design Magazine.