如何创建自己的响应css网格系统？

Question

我想要创建自己的自定义响应css网格系统，如960.gs，引导等等，我想创建我自己的系统。

所以我才刚开始想办法弄清楚。

我计算它左、右填充15 it和我的总宽度960px。

我的计算公式

960px -30 padding(左-右填充)=930 padding

我的栅格12列

930/12 =77，5 12

百分比计算：

(77,5 / 930) X 100 = 8,33%

但我的一个专栏

.container .kol1    { width:5.208333333333333%;}

我用一个在线css网格生成器来计算它。我觉得我的公式不对。

我试着用这种方法，但遇到了一些问题。什么是更好的计算方法？或者你喜欢的方法是什么？

下面是我的示例css代码：

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

我认为我的数学很差:)

更新：

嗨,

我觉得这是个糟糕的问题。我会回答我的问题。

我已经为那个网格系统创建了一个计算器。

输入容器大小和边距，它将为您计算它。如果列号大于12，则必须在计算器上添加一行:)

我的calc链接这里

Answer 1

你的计算器从你的833%中减去了利润。

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