QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Creating Cascading Grid Layouts Using Masonry

Creating Cascading Grid Layouts Using Masonry

masonry

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.
cascading-grid-layout-example
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:

<!doctype html>
<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>
    </body>
    <script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
</html>

Now we need to create a container inside which we will put our grids.

<!doctype html>
<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

<!doctype html>
<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:

<!doctype html>
<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

<!doctype html>
<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.

<!doctype html>
<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.

<!doctype html>
<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.

<!doctype html>
<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.

<!doctype html>
<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>

View Demo


Conclusion

Masonry is one of the tool used throughout the web specially in grid box based layouts. Thanks for reading.

Jul 20, 2014Narayan Prusty
Multiple Pages In PhonegapJavaScript Global Variables And Memory Leakage
Comments: 1
  1. vy nguyen
    7 years ago

    Thank You, Narayan, for this walk through tutorial!! :) <3

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Creating Full Screen Grid Layouts using jQuery Nested
  • Layout Concepts For Web Designers
  • Creating A Viewport Resizer
  • Login Using Facebook Tutorial
  • Facebook Style Chat Box Popup using JavaScript and CSS
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license