CODEWITHSUNDEEP
csshtmlresponsive-designgrid
nCore
nCore

Reputation: 2087

Responsive layout managing percentages

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%;  }

Upvotes: 0

Views: 109

Answers (4)

Ian
Ian

Reputation: 653

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

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18566

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.

Upvotes: 0

Mohammad Hamza
Mohammad Hamza

Reputation: 40

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])

Upvotes: 0

Narayana
Narayana

Reputation: 100

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;
}

Upvotes: 0

Related Questions