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.