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

-1

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

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

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

我的计算公式

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

我的电网12柱

十二分之九百三十零= 77,5px

百分比计算：

为我的一个柱子（77,5/930）×100 = 8.33％

但我的一列

.container .kol1 { width:5.208333333333333%;}

我用在线的CSS网格生成calculte它。我认为我的配方不正确。

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

以下是我的样本的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%;}

我觉得我的数学不好:)

UPDATE：

嗨，

我认为，这是一个糟糕的题。我会回答我的问题。

我为该网格系统创建了一个计算器。

输入容器大小和边距，它会为你计算。如果列数多12则必须在计算器:)

我计算的链接添加一行here

来源

2014-02-12 Erdal Bakkal

为什么你不希望使用引导程序或一些著名的和强大的？想知道。 – Vadorequest

我只是想学习系统绝对:) bootstrap是非常好的系统..我想知道的是这些计算 –

计算器从8.33％减去利润率。

8,333333333333333％ - 1.5625％， - 1.5625％= 5.208333333333333％

来源

2014-02-12 14:58:29 BastianW

嘿@BastianW是的，它似乎和谢谢你的答案。我们个人可以计算它。我需要一个实用的公式。让我们忘记我的例子，我们如何计算它？我们的容器宽度为960px和12个网格。 12格和填充的公式如何？你能否更新你的答案:) –

你是不是很熟悉lesscss？然后我会建立一些功能。但是正如Vadorequest所说，这一切都是通过bootstrap和其他前端框架完成的^^ – BastianW

但是，如果你想不做lesscss，那就把你的计算放到你的css中。 kol1 => 8,33333％，kol2 => kol1 * 2，...并删除边距。不那么难;） – BastianW

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

回答

相关问题