How to achieve masonry-like grid layout in Hugo

Okay, so I want to mimic this layout

I have tried to figure this out for months and I dont know what I should be looking at here. Here’s what I understand: This is a masonry-like grid layout for a list of posts/projects. Im particularly curious about how the posts here are aligned one under another. I have found a way to achieve the button functionality, but not the post positioning and order. Any tips?

You simply need to initialize Masonry on your list.html template. For a Hugo theme that uses Masonry have a look at the Creative Portfolio Theme.

1 Like

You can use css grid (https://css-tricks.com/snippets/css/complete-guide-grid/) and do without javascript and masonry. This will always be less to load for end users. Here some example. Here are some examples of which Mondrian layout in particular : http://labs.jensimmons.com/

1 Like