Grid systems like the 960 grid and BluePrint can be useful to place the main elements for a website in a mockup: header, slider, content blocks, sidebar, footer etc. But do you use the same grid system to place the content within each of these elements?
I find that often quite difficult. For example I have a sidebar covering 3 columns for a table of 5 columns. I could actually create a mini-grid for the sidebar only.
I haven´t found a resource that answers this question specifically, so I´m curious to hear how you do this and if there are any “best practices” I´m not aware of.
You can break out of it any time you want.
Keep in mind, a grid system serves as a guide, but not a hard rule. When you design a site, the grids should serve the content, not the other way around. 960grid is popular because the total width is divisible by so many numbers.
Before you get to the layout design, I recommend coming up with a good flow of the site content, and create some robust IA. Then after that point, see if any existing grid systems happen to fit your content flow nicely. If not, create your own grid.
Personally, I don’t use any of the existing CSS grid templates. I find the fixed gutter width and padding too limiting. If I have to change them by a few pixels, I’d end up redoing all the calculations. Also their CSS tend to be quite bloated, and I end up not using most of them.