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

Question

我想创建自己的自定义响应式 CSS 网格系统，例如 960.gs、bootstrap 等，并且我想创建自己的系统。

所以，我才刚刚开始并试图弄清楚。

我计算它的左右填充 15 像素和我的总宽度 960 像素。

我的计算公式

960px - 30px（左右填充）= 930px

我的网格 12 列

930/12 = 77,5 像素

百分比计算：

对于我的一列 (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，那么您必须在计算器上添加一行 :)

我的计算链接here

Answer 1

您的计算器从您的 8.33% 中减去边距。

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