Responsive layout managing percentages

Question

I'm trying to make my own responsive layout using percentages. I managed to calculate the columns that I wanted to use but I can't work out how to put like a margin (gutter) in between columns. If you check the codepen code there is no spacing in between the contents.

Codepen

   .container{
    width: 90%;
    max-width: 1140px;
    margin: 0 auto;
    /*background: #333;*/
}


 .container .columns{
    float: left;
    background: #ccc;
    margin: 0 0 1em ;
    padding-right: 1em;
    padding-left: 1em;
    border-left-width:12px;
    }

    .row{
        float: left;
        clear: both;
        width: 100%;
    }

    .container .columns.col-1 { width: 8.33333333333%; }
    .container .columns.col-2 { width: 16.6666666667%; }
    .container .columns.col-3 { width: 25%;   }
    .container .columns.col-4 { width: 33.3333333333%; }
    .container .columns.col-5 { width: 41.6666666667%; }
    .container .columns.col-6 { width: 50%;   }
    .container .columns.col-7 { width: 58.3333333333%; }
    .container .columns.col-8 { width: 66.6666666667%; }
    .container .columns.col-9 { width: 75%;   }
    .container .columns.col-10{ width: 83.3333333333%; }
    .container .columns.col-11{ width: 91.6666666667%; }
    .container .columns.col-12{ width: 100%;  }

Answer 1

I would personally shy away from Calc as it's still not fully supported but up to you — http://caniuse.com/#feat=calc

I would recommend wrapping all of your content in another set of elements that way you can use padding for spacing and margin for alignment. Check out the demo.

<div class="columns col-6"><div>6</div></div>

DEMO

Answer 2

Instead of giving padding give margin

.container .columns{
float: left;
background: #ccc;
margin: 0 0 1em ;
margin-right: 1em;
margin-left: 1em;
border-left-width:12px;
}

Answer 3

Use calc() method to calculate margin from width.For example for .col-3 the CSS would be

.container .columns.col-3 { 
width: calc(25% - 5px);
margin-right:5px;
}

make sure you use calc() in right way like this

calc([first value][space][operator][space][second value])

Answer 4

If you see your columns width, You have divided 100% of the viewport width equally.

For example:

.container .columns.col-6 {
   width: 50%;
}

So in that case, you won't have any space between two blocks.

So while mentioning the width for the columns, you need to consider margin as well.

so you can use either of the following two approaches:

.container .columns.col-6 { 
   width: calc(50% - 10px); // 10px represents the margin / space
   margin-right:10px;
}

or

.container .columns.col-6 { 
   width:  46%;
   margin-right: 1%;
}

The first approach is better.