html - 使用 CSS 响应式网格生成器，数学是如何工作的？

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%

1. 网格总大小为100%
2. 如果margin是1%那么grid的总margin是11%
3. 网格大小 (100%) - 边距 (11%) = 89%
4. 通过除以 89%/12 得到 1 个网格的大小
5. 结果是 7.416%

现在计算 2 of 12 grid = 15.83%

1. 二格=7.416%+7.416%=14.832%
2. 在第二个网格中，我们必须添加 1% 的边距，因为当我们合并两个网格时，它们之间的边距会收缩，因此总数为 14.832% + 1% = 15.832%

下一个网格也一样