Learn Masonry JS in 5 Minutes

In this JavaScript tutorial you'll learn how to create a fluid grid layout with the Masonry JS grid layout library.

Masonry.js homepage: https://masonry.desandro.com/

00:22 Installing
00:42 Adding Markup for the Grid
01:26 Activate Masonry
02:59 Gutter option
03:17 Responsive images
03:30 Alignment
04:12 Events

— Follow Me —
Twitter:   / codebubb  
Facebook:   / juniordevelopercentral  
Blog: https://www.juniordevelopercentral.com/
— Thanks! —

So this Masonry JS tutorial will show you how to create a fluid grid layout which adapts to make the best use of the available screen space for a group of elements.

In the tutorial, we'll use a grid containing element which essentially holds a group of other 'grid item' divs each having an image inside it.

This Masonry JS tutorial will cover installing Masonry JS, creating a new instance of the library, using gutters and responsive images along with configuring alignment of the items within the grid layout.

Finally, we'll take a look at how you can use the API Masonry provides to listen for events that occur, like the layoutComplete event, and how to perform actions upon those events being triggered.

Learn Masonry JS in 5 minutes. Channel Handle @codebubb