Here is our take on news, art, ideas, technology, the web, and things we like - join the discussion and don't forget to subscribe to the RSS feed.

gridsystem

   Zoran Perin

Responsive grid system with fixed gap

How many times did you have to deal with columns? And how often did you need layout that would be responsive? Pretty darn often, I bet. Fluid (responsive, adaptive) layout is today a default requirement when developing a website and, whether we want it or not, we somehow re-orient our thinking towards a tablet-like approach in working with website layouts.

So, the big deal is not making, let say,  two columns with gaps between them and making them fluid (putting their width in percentage). The tricky part is when your designer drives you crazy with the fact that the gap is changing along with the browser size. In that situation, it is useless to explain that 2% of 900px is way different than 2% of 600px. In a situation like this, you need something that will calculate widths for you.

Unfortunately, CSS is not yet ready for that task, so advanced techniques like CSS columns or box-sizing are not the best solutions (yet!), because we still have our good old friend Internet Explorer with an army of users. All this means only one thing: javascript. Well, what is better for on-the-fly calculations on client side than good old JS?

Not convinced? Please take a look at the DEMO. If you are convinced, DOWNLOAD it and try it for yourself.

Installation guide:

You will need the following:

1. jQuery core
2. grid system JS
3. some lines in CSS
4. proper HTML structure

As always, we will start by including jQuery core in your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Next, include the gridSystem JS after the jQuery core:

<script src="js/gridSystem.js"></script>

Your JS is quite ready. Let us move to some HTML. Idea with column here is to have all elements organized in rows, so we will use container for each row, as:

<div class="row clearfix">
<div class="column column-1-3">1/3</div>
<div class="column column-2-3">2/3</div>
</div>

So, you will notice that we have, for each row, an element that surrounds its children. That is a div with class “row”. Inside of every row you have children and they have a generic class “column” as well as a specific class that will tell you how big it is, and whether it is “column-1-3” – or “column-2-3” in our case. Since this column system is made to support 6 columns, you can have all combinations of columns, from 1 to 6.

Initialization

Once you have JS included and HTML organized in a way you like, the only thing needed is to call the JS that will take care of your layout.

It is easy as:

$(document).ready(function() {

    $('body').gridSystem();

});

Our plugin gives you two options to change and you can use them:

$(document).ready(function() {

    $('body').gridSystem({
        gridGap: 20,
        widthThreshold: 640
    });

});

where parameters are, as you may guess:

gridGap: margin between elements (default value is 20)
widthThreshold: width of the viewport under which JS will consider devices as mobile and transform layout to one-column layout

Conclusion

This approach makes life much easier when you have to deal with columns and responsive layout. As always, it has some issues and the main one is that javascript needs some time to load, calculate and reposition elements, so for a moment after the page is loaded content may be messed. Of course, you can always find a way around it, but this is up to you.

Otherwise, the gridSystem plugin is there to help you calculate and deal with columns and I’m sure it will save you some headaches.

  1. Good job! 😉

    Comment by Zoran Jezdimirovic

  2. Good job but i can’t find a way for nested grid. Is it possible ?

    Comment by SquiDi

  3. What do you think with “nested grid”?

    Comment by Zoran Perin

  4. Hi Zoran,

    I mean Grid in Grid and i find the way.

    Headline one 1/1

    1/2
    1/2

    Headline two 1/1

    1/2
    1/2

    Thanks for your work 🙂

    Comment by SquiDi

  5. Hello,

    I’m interested in trying the gridSystem, but download link does not seem to work.

    Is it still possible to grt it ?

    Thank you.

    Comment by Costa

  6. Hi Costa! It was an error with the incorrect link. It is fixed now. Thank you and enjoy!

    Comment by Zoran Perin

  7. It works !

    Thank you very much 🙂

    Comment by Costa

  8. Svaka čast moram reči da je ovo, veoma glatko rešenje..pozz

    Comment by Nikola

Leave a Reply

Your email address will not be published. Required fields are marked *