Do you know what is the name of this layout?
<img src="/media/masonry.png" alt="Masonry Layout" title="Masonry Layout">
Sometimes knowing the correct name helps a lot in solving the problem, because googling with correct name can give the results we need. 
I was creating a layout with list of items of uneven height and width and handling the dynamic list of such items and making sure it is responsive needs a bit of both CSS and JS. 
After many hours I was finally able to achieve it but then I came to know the name that it is called Masonry Layout.
And googling with Masonry layout I got ready to use lib code with which this can be achieved in minutes with ease.
I picked <a href="https://github.com/desandro/colcade">Colcade</a> which was apt for my need and within minutes the layout was looking good.
Here's the beautiful <a href="https://css.heyayush.com/layouts/Masonry/">Preview</a>
You may also check out the underlying code <a href="https://github.com/heyayush/css-tricks/tree/develop/src/pages/layouts">here</a>
Feel free to add your suggestions and feedback in the comments below.
- Ayush 🙂

When we need to display a list of items of uneven sizes, then Masonry layout is the best choice. Image gallery and Newspaper columns are some common examples.

Responsive Masonry Layout