Question

我试图理解数学如何在像这样的css网格生成器中运行：http://www.responsivegridsystem.com/calculator/

使用12列和1％边距显示如下：

.span_12_of_12 {
    width: 100%;
}

.span_11_of_12 {
    width: 91.58%;
}
.span_10_of_12 {
    width: 83.16%;
}

.span_9_of_12 {
    width: 74.75%;
}

.span_8_of_12 {
    width: 66.33%;
}

.span_7_of_12 {
    width: 57.91%;
}

.span_6_of_12 {
    width: 49.5%;
}

.span_5_of_12 {
    width: 41.08%;
}

.span_4_of_12 {
    width: 32.66%;
}

.span_3_of_12 {
    width: 24.25%;
}

.span_2_of_12 {
    width: 15.83%;
}

.span_1_of_12 {
    width: 7.416%;
}

我可以计算没有边距的行但是我想了解如何将边距添加到等式中。

理由是我想把这一切都放在我的sass中的mixin / for循环中，这样我就可以在网格上指定任意数量的列。

Answer 1

他们在这里使用近似计算。

计算12格中的一个= 7.416％

网格的总大小为100％
如果保证金为1％，那么网格的总保证金为11％
网格大小（100％） - 保证金（11％）= 89％
通过除以89％/ 12
结果为7.416％

现在计算12个网格中的2个= 15.83％

第二格= 7.416％+ 7.416％= 14.832％
在第二个网格中，我们必须增加1％的保证金，因为当我们合并两个网格时，它们之间的边距会崩溃，因此总数为14.832％+ 1％= 15.832％

相同的下一个网格

使用CSS响应网格生成器数学如何工作？

1 个答案: