Masonry is a JavaScript framework which allows us to build cascading grid designs. If you don’t know what is cascading grid layout then check out the below website.
Here the homepage has posts listed in form of grids. The horizontal number of grids increase as the size of the viewport increases and the grids are dropped down when the viewport size decreases.
Don’t get confused between grid system and cascading grid layout. A grid system is used to create a grid layout.
The width of each grid box can be constant or else can be fluid(changed) according to the viewport width. In the above example the grid box width is fluid.
Using Masonry
First lets create a Masonry template:
Now we need to create a container inside which we will put our grids.
<html>
<head>
<title>Cascading Grid Layout Example</title>
<!-- Include this if you want responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container"></div>
</body>
<style>
#container
{
background-color: grey;
}
</style>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
</html>
Now we need to define our grid boxes. We need to decide if your grid boxes are going to be fluid or fixed width. I prefer to use fixed width boxes as it makes them look more pleasant.
We need to explicitly provide the width of the boxes
<html>
<head>
<title>Cascading Grid Layout Example</title>
<!-- Include this if you want responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<style>
#container
{
background-color: grey;
}
.item
{
width: 320px;
height: 250px;
background-color: green;
}
</style>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
</html>
Now we need to initialize masonry. Mansory uses a logical grid system just like a bootstrap grid system to position the grid boxes. As we know that every grid system has columns and columns have width, therefore we need to explicitly define the width of the grid system columns. If we don’t define it then masonry take the first grid box width as the column width. The grid system used by masonry is responsive therefore columns are dropped in smaller screens and so grid boxes are too.
Let’s initialize masonry:
<html>
<head>
<title>Cascading Grid Layout Example</title>
<!-- Include this if you want responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<style>
#container
{
background-color: grey;
}
.item
{
width: 320px;
height: 250px;
background-color: green;
}
</style>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
//here we define grid system column width to be 320px. This remains constant throughout all viewport sizes. Columns are dropped when they have no space which makes them a responsive grid system similarly columns are added when viewport size increases.
columnWidth: 320,
//select all grid boxes
itemSelector: '.item'
});
</script>
</html>
Now you will notice that grid boxes are too attached to each other. Therefore we need some horizontal space between. There are two ways to get the space:
First method is define the grid boxes width little smaller than column width
<html>
<head>
<title>Cascading Grid Layout Example</title>
<!-- Include this if you want responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<style>
#container
{
background-color: grey;
}
.item
{
/*decreased size*/
width: 300px;
height: 250px;
background-color: green;
}
</style>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
//here we define grid system column width to be 320px. This remains constant throughout all viewport sizes. Columns are dropped when they have no space which makes them a responsive grid system similarly columns are added when viewport size increases.
columnWidth: 320,
//select all grid boxes
itemSelector: '.item'
});
</script>
</html>
This works because grid boxes are always started from a new column.
Second method is you can use masonry preferred method by setting the javascript gutter property.
<html>
<head>
<title>Cascading Grid Layout Example</title>
<!-- Include this if you want responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<style>
#container
{
background-color: grey;
}
.item
{
width: 320px;
height: 250px;
background-color: green;
}
</style>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
//here we define grid system column width to be 320px. This remains constant throughout all viewport sizes. Columns are dropped when they have no space which makes them a responsive grid system similarly columns are added when viewport size increases.
columnWidth: 320,
//select all grid boxes
itemSelector: '.item',
//gutter property here
gutter: 10
});
</script>
</html>
To set vertical space between grid boxes you have to use margin-bottom there is no other method.
<html>
<head>
<title>Cascading Grid Layout Example</title>
<!-- Include this if you want responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<style>
#container
{
background-color: grey;
}
.item
{
width: 320px;
height: 250px;
background-color: green;
margin-bottom: 10px;
}
</style>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
//here we define grid system column width to be 320px. This remains constant throughout all viewport sizes. Columns are dropped when they have no space which makes them a responsive grid system similarly columns are added when viewport size increases.
columnWidth: 320,
//select all grid boxes
itemSelector: '.item',
//gutter property here
gutter: 10
});
</script>
</html>
There are a lot of other options you can pass to the Masonry class. Check them here.
Sometimes we might need to insert new grid boxes using JavaScript. This is helpful for AJAX based apps. Masonry functions provides this functionality.
<html>
<head>
<title>Cascading Grid Layout Example</title>
<!-- Include this if you want responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<button onclick="remove_item();">Remove inserted box.</button>
</body>
<style>
#container
{
background-color: grey;
}
.item
{
width: 320px;
height: 250px;
background-color: green;
margin-bottom: 10px;
}
</style>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
//here we define grid system column width to be 320px. This remains constant throughout all viewport sizes. Columns are dropped when they have no space which makes them a responsive grid system similarly columns are added when viewport size increases.
columnWidth: 320,
//select all grid boxes
itemSelector: '.item',
//gutter property here
gutter: 10
});
//script to add elements using javascript
var elem = document.createElement('div');
elem.className = "item";
elem.innerHTML = "Inserted using javascript";
container.appendChild(elem);
var elements = [elem];
//appended method does the re-layout after new element is inserted into the container.
msnry.appended(elements);
//script to remove elements using javascript
function remove_item()
{
msnry.remove(elements);
}
</script>
</html>
We might to do some actions after a grid box is removed using masonry. Masonry provides events using which we can track when masonry completed layouting or removing of items.
<html>
<head>
<title>Cascading Grid Layout Example</title>
<!-- Include this if you want responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<button onclick="remove_item();">Remove inserted box.</button>
</body>
<style>
#container
{
background-color: grey;
}
.item
{
width: 320px;
height: 250px;
background-color: green;
margin-bottom: 10px;
}
</style>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
//here we define grid system column width to be 320px. This remains constant throughout all viewport sizes. Columns are dropped when they have no space which makes them a responsive grid system similarly columns are added when viewport size increases.
columnWidth: 320,
//select all grid boxes
itemSelector: '.item',
//gutter property here
gutter: 10
});
//script to add elements using javascript
var elem = document.createElement('div');
elem.className = "item";
elem.innerHTML = "Inserted using javascript";
container.appendChild(elem);
var elements = [elem];
//appended method does the re-layout after new element is inserted into the container.
msnry.appended(elements);
//script to remove elements using javascript
function remove_item()
{
msnry.remove(elements);
}
//event trigger when item is removed usin js
msnry.on('removeComplete', function(msnryInstance, removedItems) {
alert('Removed ' + removedItems.length + ' items');
});
</script>
</html>
Conclusion
Masonry is one of the tool used throughout the web specially in grid box based layouts. Thanks for reading.
<3
@narayanprusty
