What is a CSS grid system?

Question

I'm looking into css frameworks, mainly for resets, structuring my projects better, etc.

I found Html Boilerplate (which i'm using). I now see frameworks such as blueprint and 960gs, they claim a grid based layout. Could someone explain what a grid based layout is? How does it work?

Answer 1

I would recommend you reading Which CSS Grid Framework Should You Use for Web Design? over on NetTuts.

It goes into depth and answers the questions you have, as well as a comparison of some of the CSS frameworks out there.

They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.

Quoted from the link I attached with regards to print publishing layout grids. But in the context of the Web world (CSS) grid systems allow you to create complex CSS grid layouts instead of html table layouts.

Answer 2

A bunch of pre-defined CSS rule-sets, that you can use the class names from to organise elements into grids of various sizes.

The easiest way to grok the idea is to just try using something like blueprint of 960gs.