CSS grid padding

Russinating · 5 Oct 2013 at 17:38

I think I'm having a blonde moment here. I'm putting together a website from scratch based on a standard grid system with the following options:

[1column]
[2column] [2column]
[3column] [3column] [3column]

What is the neatest way of having the fewest css classes whilst allowing for padding? For any segments, ie 2column and 3column, how can you neatly specify say a padding of 20px in between each, whilst keeping the edges flush? Does that make sense?

Previously I've used a spacer div but at the moment that doesn't feel like it'd be the neatest way.

Tripnologist · 6 Oct 2013 at 12:22

I've been using Susy, which is a responsive grid framework for Compass and I love it.
Even if you don't use SASS/Compass, you can take a look at how it works.

http://susy.oddbird.net

ikillbears · 6 Oct 2013 at 15:51

if your stupid and new to webdesign ( like me ) i use this as i can get my head around it : http://960.gs/ then for divs you just put a class "grid_3" for example and it does it all for you.

Russinating · 6 Oct 2013 at 16:56

Thanks folks. In the meantime I decided to do what 960 effectively does, and that's every column has the same left and right margin so the 'wrapper' as it were contains the excess spacing on the far left and right.

So difficult to word that!

WIP anyway: www.novelphotography.co.uk/beta

ikillbears · 9 Oct 2013 at 16:43

im not sure if im reading the question right but one thing that i only recently realised about the 960 grid system is in the class where you put grid_3 for example. you can also add

prefix_ ( insert number here ) / suffix_ ( insert number here ) that will essentially create a fake grid in front of it

you can also add alpha / omega which removes some of the padding to the left / right of the div.

this probably explains it a whole lot better http://sixrevisions.com/web_design/the-960-grid-system-made-easy/