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
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.