box-sizing 1     box-sizing 2     equal height columns    

The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element padding and border are included in the width and height:



Responsive Grids - no internal margins

Adding margins of 1% wil require the n% to be reduced to (n-2)% (1% left, 1% right).

20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80%
ZZZZ 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40%
40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% alien
60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% alien
40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60%


Responsive Grids - WITH internal margins

Adding margins of 1% wil require the n% to be reduced to (n-2)% (1% left, 1% right).

20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80%
40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40%
40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% alien
60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% alien
40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20%
60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60%




Fixed Grids - no internal margins

Adding margins of 5px wil require the Npx to be reduced to (N-10)px (5 left, 5 right).

200px 200px 200px 200px 200px 200px 200px 200px 200px 200px 200px 200px
800px 800px 800px 800px 800px 800px 800px 800px 800px 800px 800px 800px alien
200px 200px 200px 200px 200px 200px 200px 200px 200px 200px 200px 200px
400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px
400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px
600px 600px 600px 600px 600px 600px 600px 600px 600px 600px 600px 600px alien
400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px


Fixed Grids - WITH internal margins

Adding margins of 5px wil require the Npx to be reduced to (N-10)px (5 left, 5 right).

200px 200px 200px 200px 200px 200px 200px 200px 200px 200px 200px 200px
800px 800px 800px 800px 800px 800px 800px 800px 800px 800px 800px 800px alien
200px 200px 200px 200px 200px 200px 200px 200px 200px 200px 200px 200px
400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px
400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px
600px 600px 600px 600px 600px 600px 600px 600px 600px 600px 600px 600px alien
400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px 400px