Question

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

所以，我刚刚开始尝试弄明白。

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

我的计算公式

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

我的网格12列

930/12 = 77,5px

百分比计算：

我的一个专栏（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％

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

1 个答案: