[Solved] Calculating percentage grid

[bgbs]

Hi. I need to recalculate this grid below to have 3% gutter, instead of 2% that it is now. I’m so bad with math, that I don’t even know where to start.

      .gutters .span_1 { width: 6.5%; }
    .gutters .span_2 { width: 15.0%; }
    .gutters .span_3 { width: 23.5%; }
    .gutters .span_4 { width: 32.0%; }
    .gutters .span_5 { width: 40.5%; }
    .gutters .span_6 { width: 49.0%; }
    .gutters .span_7 { width: 57.5%; }
    .gutters .span_8 { width: 66.0%; }
    .gutters .span_9 { width: 74.5%; }
    .gutters .span_10 { width: 83.0%; }
    .gutters .span_11 { width: 91.5%; }
    .gutters .span_12 { width: 100%; }

[Senff]

For a 3% gutter, shouldn’t the total of 12 spans always be 97%?

[bgbs]

I tried to recalculate it myself. Here is the result

    .gutters .span_1 { width: 5.58333333%; }
    .gutters .span_2 { width: 14.1666667%; }
    .gutters .span_3 { width: 22.75%; }
    .gutters .span_4 { width: 31.3333333%; }
    .gutters .span_5 { width: 39.9166667%; }
    .gutters .span_6 { width: 48.5%; }
    .gutters .span_7 { width: 57.0833334%; }
    .gutters .span_8 { width: 65.6666668%; }
    .gutters .span_9 { width: 74.2500001%; }
    .gutters .span_10 { width: 82.8333335%; }
    .gutters .span_11 { width: 91.4166669%; }
    .gutters .span_12 { width: 100%; }

for 3% margin Im using

@media ( min-width : 768px ) {

    .gutters .col {
        margin-left: 3%;
    }

    .gutters .col:first-child { 
        margin-left: 0; 
    }
}

It seems to be working for me.

[Author]

Posts