Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I see there are large number of grid frameworks in CSS like 960, heroku grid, etc being used by huge websites. I want to know whether using grid structure is really useful? If yes, then how?

One of the biggest problem I saw with grid is having equal heights for elements. If we are using three grids like grid_2, grid_7, grid_3 for 3 vertical panels then it becomes very difficult to have these three panels positioned in a way such that they have equal heights and all of them change height when any of the content exapnds or collapse.

This is because elements are floated in grid system and they don't change height along with neighbouring element.

share|improve this question

3 Answers 3

Have you looked at Bootstrap from Twitter?

Not only is it a good collection of css styles and js controls, it also includes a grid system.

One of the ways you make several columns the same height is by wrapping them in a div with a class of 'row'.

For example:

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>
share|improve this answer
    
thanks for the interesting pointer –  CapelliC Feb 26 '12 at 20:04
    
Thanks Boris, this was helpful. Is Bootstrap being used widely? –  akp Feb 27 '12 at 3:38
    
It is starting to get wide use. It has been released half an year ago, and version 2 just a couple of weeks ago. –  Boris Yankov Feb 27 '12 at 19:57

Benefits of Implementing a Grid System A Grid…

  1. Gives your design consistency
  2. Allows flexibility between elements
  3. Can make your designs more usable and legible
  4. Reduces CSS coding errors
  5. For the most part, it eliminates the need for nested HTML tables
  6. Can be used sort of like a wireframe allowing you to plan
  7. “Blesses” you with cross-browser support
  8. Streamlines your development process for future projects
  9. Acts as an adhesive and encourages the correlation between separate page elements
  10. Makes it easier to embed images, text, and other visual aesthtics.
share|improve this answer

Some say using a grid gives you freedom and doesn't restrict it. The reason for that is that you have an idea of what should go where and how big or small things need to be. Without it, you are just guessing and constantly fiddling with dimensions to make things fit as the space fills up.

It does NOT mean you have equal height elements. A grid is used for alignment but you aren't constrained in all cases.

Grids are used everywhere in publishing. Perhaps the only real difference to the web is that your page resizes. Even then a grid is useful if you let your content be your guide when setting breakpoints. If an element no longer fits in your grid when it's resized, perhaps that element needs to be resized or re-positioned.

Again, grids can take a lot of guesswork out of where to place things.

share|improve this answer

Your Answer

 
discard

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.