Creating a masonry layout with CSS Grid

In a recent project I came across a nifty way to create a masonry grid layout using CSS grid and a smidge of javascript . Initially I thought about using something like Masonry.js or Isotope but it kinda felt a little bit overkill. Whats cool about this approach its super flexible and it’s not relying on any frameworks! I’m going to try and keep this post short and sweet so you can get up and running and enjoy this trick yourselves.

Lets get started by adding some HTML to an index.html file

Here we have created a simple grid with some grid items. Note: the padding-top and lazyloaded are to prevent the jumping of content when your images load in.

Now lets create some css

Essentially what we are doing here is telling .grid that we want to display a responsive grid of items. minmax(300px, var( — template-columns, 1fr)) does a lot of the heavy lifting for us here by creating repeating columns with a minimum width of 300px and a max width of 1fr (fr is a fractional unit), when a column width falls below the minimum value the layout reshuffles and the number of columns reduces.

Some things to note here is grid-auto-rows: 5px which is what is going to allow us to create our masonry layout. Some stylistic preferences I have is to use grid-gap-columns and padding-bottom to create the spacing between elements. The reason for this is I found the spacing to become noticeably inconsistent if grid-gap-rows is also used.