How do I work with grids when I need padding and margin?

Question

I've stayed clear of using any kind of grid systems because I always mess it up with padding and margin.

Let's sat my grids are at 90px and I have this code:

//HTML
<div class="col1">
 <div class="content">
   Hello world
 </div>
</div>

//CSS
.col1 { width: 90px; margin: 0px; padding: 0px; background-color: #444; }
.content { margin: 20px; color: #fff; background-color: #0087d5; width: 100%; }

JSfiddle here.

How can I work with grids, make sure the grid remains 90px width, while having inside ´div´ at 100% width with 20px padding / margin?

I know there are many grid systems out there and I've tested a few, but I must be "attacking" this the wrong way because my grids always expands when I start using padding to get some space.

Answer 1

You should be applying box-sizing, which accounts for padding when computing the width (i.e. 90px + 10px for padding, will apply the padding inwards, rather than creating a total width of 110px. If you want to be extra safe, add this to your reset or normalise stylesheet:

* { box-sizing: border-box }

For older versions of Safari & Firefox:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box }

Using the wildcard selector allows the box-sizing property to be applied to all elements. I know this is included in some grid systems out there, e.g. Skeleton.