CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Erdal Bakkal
Erdal Bakkal

Reputation: 343

How to create own responsive css grid system?

I want to create own custom responsive css grid system like 960.gs, bootstrap etc. and I want to create my own system.

So, I'm just starting and trying to figure out.

I calculate it left and right padding 15px and my total width 960px.

My calculation formula

960px - 30px (left-right padding) = 930px

My grid 12 column

930/12 = 77,5px

Percentage calculation:

for my one colum (77,5 / 930) X 100 = 8,33%

but my one column

.container .kol1    { width:5.208333333333333%;}

I calculte it with a online css grid generator. I think something incorrect my formula.

I tried to do with this method but I have met some problems. What is a better method of calculation? or What are your preferred methods?

The following is my sample css code:

    .container          { position:relative; padding-left:15px; padding-right:15px; margin:0 auto; }
    .container          { width:960px; }


    .container .kol1, 
    .container .kol2,
    .container .kol3,
    .container .kol4,
    .container .kol5,
    .container .kol6,
    .container .kol7,
    .container .kol8,
    .container .kol9,
    .container .kol10,
    .container .kol11,
    .container .kol12   { margin-left:1.5625%; margin-right:1.5625%; float:left; display:inline; margin-bottom:30px; background-kolor:#f8f8f8; text-align:center; padding:30px 0;}

    .container .kol1    { width:5.208333333333333%;}
    .container .kol2    { width:13.54166666666667%;}
    .container .kol3    { width:21.875%;}
    .container .kol4    { width:30.20833333333333%;}
    .container .kol5    { width:38.54166666666667%;}
    .container .kol6    { width:46.875%;}
    .container .kol7    { width:55.20833333333333%;}
    .container .kol8    { width:63.54166666666666%;}
    .container .kol9    { width:71.875%;}
    .container .kol10   { width:80.20833333333333%;}
    .container .kol11   { width:88.54166666666666%;}
    .container .kol12   { width:96.875%;}

I think my math is bad :)

UPDATE:

Hi,

I think, It was a bad question. I will answer my question.

I have created a calculator for that grid system.

Enter Container size and margin, it will calculate it for you. If your column number more 12 then you must add a row on calculator :)

My calc link here

Upvotes: 0

Views: 1517

Answers (1)

BastianW
BastianW

Reputation: 270

Your calculator subtract the margins from your 8,33%.

8,333333333333333% - 1.5625% - 1.5625% = 5.208333333333333%

Upvotes: 1

Related Questions