How to put gutters in grids

[CarraraWebsiteSolutions]

hello I am not to sure on how to put gutters in the grids they are all bunched up at the moment.

http://codepen.io/mwbcomputers/pen/ilwAm

[Paulie_D]

Gutters between grid sections mean that you will have to rework your percentages.

On the other hand if the grid elements have padding then gutters automatically come in when adding elements inside grid elements.

I think that’s why Chris Coyier posted this: https://css-tricks.com/dont-overthink-it-grids/

[CarraraWebsiteSolutions]

Yeah I tried it didn’t work for some reason so thought gave it ago watched video but box-sizing didn’t work when done this

up top of css

* {

  box-sizing: border-box;


}

[Paulie_D]

There is no reason why the box-sizing property would have any effect on the grid other than to say that you have defined a with (say 50%) and that’s the actual with it will be.

I fell into the same way of thinking when looking at grids. Gutters don’t exist on the actual grid elements.

BUT by adding internal padding to the grid divs, any div you put inside a grid will mean that gutters are created automatically.

[CarraraWebsiteSolutions]

OK will have a go again tomorrow.

I will post a reply on this post and will let you know how I go boot strap was to heavy so really now trying to make my own probably take me a week or few days to figure it out.

[joren]

Hi, you can indeed use box-sizing: border-box. I recommend that you take a look at this great article by David Bushell.

[Author]

Posts