Categories: Front-End Web DevelopmentWeb DevelopmentTutorials

Setting up a single-width column system (Simple)

3 min read

(For more resources related to this topic, see here.)

Getting ready

To perform the steps listed in this article, we will need a text editor, a browser, and a copy of the Masonry plugin. Any text editor will do, but my browser of choice is Google Chrome, as the V8 JavaScript engine that ships with it generally performs better and supports CSS3 transitions, and as a result we see smoother animations when resizing the browser window. We need to make sure we have a copy of the most recent version of Masonry, which was Version 2.1.08 at the time of writing this article. This version is compatible with the most recent version of jQuery, which is Version 1.9.1. A production copy of Masonry can be found on the GitHub repository at the following address:

https://github.com/desandro/masonry/blob/master/jquery.masonry.min.js

For jQuery, we will be using a content delivery network (CDN) for ease of development. Open the basic single-column HTML file to follow along. You can download this file from the following location:

http://www.packtpub.com/sites/default/files/downloads/1-single-column.zip

How to do it…

Set up the styling for the masonry-item class with the proper width, padding, and margins. We want our items to have a total width of 200 pixels, including the padding and margins.
```
<style>
  .masonry-item {
    background: #FFA500;
    float: left;
    margin: 5px;
    padding: 5px;
    width: 180px;
   }
</style>
```

Set up the HTML structure on which you are going to use Masonry. At a minimum, we need a tagged Masonry container with the elements inside tagged as Masonry items.

<div id='masonry-container'>
  <div class='masonry-item '>
     Maecenas faucibus mollis interdum.
  </div>
  <div class='masonry-item '>
    Maecenas faucibus mollis interdum. Donec sed odio dui. Nullam
quis risus eget urna mollis ornare vel eu leo. Vestibulum id
ligula porta felis euismod semper.
  </div>
  <div class='masonry-item '>
     Nullam quis risus eget urna mollis ornare vel eu leo. Cras
justo odio, dapibus ac facilisis in, egestas eget quam. Aenean
eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum.
  </div>
</div>

All Masonry options need not be included, but it is recommended (by David DeSandro, the creator of Masonry) to set itemSelector for single-column usage. We will be setting this every time we use Masonry.
```
<script>
  $(function() {
    $('#masonry-container').masonry({
       // options
       itemSelector : '.masonry-item',
     });
   });
</script>
```

How it works…

Using jQuery, we select our Masonry container and use the itemSelector option to select the elements that will be affected by Masonry. The size of the columns will be determined by the CSS code.

Using the box model, we set our Masonry items to a width of 90 px (80-px wide, with a 5-px padding all around the item). The margin is our gutter between elements, which is also 5-px wide. With this setup, we can con firm that we have built the basic single-column grid system, with each column being 100-px wide. The end result should look like the following screenshot: