I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated.

So I read about the prospect of a grid layout. All of the articles I found are oriented toward an 'artistic' explanation (golden ratio ect). I am a coder at heart, I need a clear & logical reason to use a grid layout (for example: 'columns can be easily stacked on top of each other on mobile screen, and expand horizontally on larger screens'). Can someone give me the pros and cons of applying a grid system to my website? Personally do you think using a grid system is good?

If the answer is yes, should I use a premade grid system like from Twitter Bootstrap/Foundation or just make one for my own? All of the other features are unnecessary for me an irrelevant to my problem.

4 Answers 4


Grid as visual alignment and ordering of blocks not only creates layout structure for more easy content perception, but also creates feel of consistensy and solidness, which partly works on subconscious level. It is hard to express by words, but eyes grasp it quickly. Just compare:
enter image description here

The full answer will contain a bunch of words like cognitive psychology, left brain, right brain, Gestalt principles, emotional design, etc.

But as you point

I am a coder at heart

using the grid system allows you to focus on coding, which is your strength, and having no solid design background, still get appealing layout with less efforts.


A grid layout can create variable height of content areas with a static width. This is great because you can +/- columns depending on resolution of viewing device. The only downside is that for some types of service/site, a grid layout doesn't make sense.

It's hard to answer your question without knowing what you're potentially displaying on the site through the grid system. For some websites it makes great sense. For others, it might only have specific application for certain content. For others, it has no place.

  • One of the problem I constantly had to face while using premade grid layout is the width of the sidebar. Normally my sidebar's width doesn't really need to 'scale' much, it doesn't need more space on large screen, but can't cut down much space in smaller screen. In fact I'd really love it if the sidebar stay the same as screen size get larger, and only the main content get scaled. But that doesn't 'feel right' using premade grid: fixed width doesn't comfort to the system's column size. I think if you're applying a grid system, you better use it everywhere in your website, don't you?
    – AVAVT
    Commented Sep 7, 2013 at 14:49
  • Generally speaking, building out a template and then editing content within your template is an effective way to run a website. The container changes much less often than the content. I can't advise you on your specific website, as I haven't seen it and I dont know what your content looks like. It is up to you to make the best decision based on your site's unique set of requirements :)
    – Arman
    Commented Sep 7, 2013 at 19:16

As per my point of view, using a premade grid layout is good if you are planning to develop a site or web application that you want to finish in shorted duration of time as you will exempt yourself from writing all the grids from scratch.

As you said, there are many things that are not useful, you can anytime delete them and make code ligher.

Using the grid layout will give you flexibility to concentrate on other aspect of the site design and UI/UX. Also, the responsiveness provided by grid layouts is of real value.

I personally recommend Twitter Bootstrap as its trial and tested one.


The main reason to use a pre-made grid is not artistic (e.g. golden ratio, etc.) at all. In fact it is very practical and has real values

  • Asthetically speaking, using the grid will help you achieve the consistency and alignment across your web pages or throughout the web application. It greatly speeds up the layout process by giving the designers 'anchors' and positioning constraint to use and apply.

  • Implementation-wise, developers can have 'responsive design" functionality for free. As the web is going mobile at the moment, responsive design becomes as important as ever. And caring for the different resolutions is very time-consuming. A grid will scale accordingly as users resize their window and help designers and developers think about the different strategies to cope with the different device setups.

As for the need to use fixed width elements, it's not uncommon to have some elements aligned to the grid and some not. But you can be assured that the ones that are aligned will always be scaled, and adjusted. And the ones that are not will keep its original position and size.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.