Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
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? –  Av Avt Sep 7 '13 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 Sep 7 '13 at 19:16
add comment

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.

share|improve this answer
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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