Question

I have been using the 960 grid system for a while and I always have the problem when adding padding to my divs.

I am wondering if it is a good/safe practice to modify the grid system CSS and add box-sizing: border-box to my *grid_x* classes. Are there any disadvantages?

So far I have been using an internal div with extra padding, so I don’t mess with my divs containing the grid classes. It has worked fine but it just fills my layout with extra divs all over the place.

Is box-sizing a good option or do you have any other work-around, solutions, suggestions?

Many thanks

Answer 1

i think it’s the best if you add a box inside a grid_x, then add border for the box.

here is the example

html :

<div class="grid_1">
    <div class="box">
        test
    </div>
</div>

css:

.grid_1 {
    width:100px;
    height:100px;
}
.box{
    border:1px solid red;
}