[seunghomattyang]

I only recently started learning HTML and CSS so I was wondering if there is a good resource for learning how to use grids.

I don't exactly understand how to use grids (or even why). Is it for visual consistency or is there an underlying usability/maintainability benefit to using grids?

[blauwbilgorgel]

The two main designers that started the grid-craze were Mark Boulton and Khoi Vinh. Some resources from them:

http://www.markboulton.co.uk/journal/comments/five-simple-st...

http://www.subtraction.com/2004/12/31/grid-computi

How to use grids? It is usually as simple as adding some css, divs and classes. At its most basic, you can use a gridpaper background or this javascript gridder: http://gridder.andreehansson.se/ that works well with the http://960.gs grid framework.

Why I use grids?

- maintainability and cooperation

- visual consistency across browsers

- less development time spent with display bugs

Why I don't use grids?

- Can become a bit boring/holding you back

- Not all designs work with even columns (for example those based on the golden ratio)

- Code bloat (you are using divs like columns and rows, in almost the same way one would layout a page with tables, also devs sometimes forget to remove the unused classes from the production CSS)

[lean]

I think Josef Müller-Brockmann predates those two by just a bit :)

[SingAlong]

You might find this SmashingMagazine article useful http://www.smashingmagazine.com/2007/04/14/designing-with-gr...

I prefer using the semantic approach to writing CSS using mixins (both Compass and LessCSS have mixin support). That keeps the html markup clean and maintainable.

Also to note, LessCSS (used in Bootstrap) is different from Less Framework (http://lessframework.com/), which is a CSS grid framework.

[frisco]

It's just a convention to make it easier to be consistent, simplify your markup, and make development easier. Having a grid with a few defined classes for fitting into that grid is much simpler than building each page from the ground up. They also act as a shortcut for screen resolution compatibility. See http://lessframework.com/ for an example (there are other frameworks, but Less is just the one I remember right now).

[ulisesroche]

The best resource on why and how to use grids is: http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...

It's primarily used as an aid for visual layouts, but it took on the other useful qualities everyone else has listed as the grid frameworks got popular in the web.

[artursapek]

Once you get into HTML and CSS you'll probably find that modular layouts are inescabaple, and with those naturally come grids. They allow you to swap out certain parts of your site and keep others consistent based on the content being displayed, and that just results in visual consistency.