网格布局计算公式如何推导

Question

比如，总格数为grids，某格数为n，单个间距(margin)为gutter，那么第n格的宽度是多少（间距和宽度都是百分比）？
这个怎么推导呢？

javascriptvar grids=12;
var gutter=0.02;
var wn=function(n){
    return n/grids-gutter+n*gutter/grids;
};

以上参考自：https://github.com/cathydutton/maze/blob/master/src/sass/framework/_grid.scss

Answer 1

可以参考gridster的代码 也可能是angular-gridster

Answer 2

以上条件不足，因为你给的 gutter 不知道是 px 还是百分比，还有不知道最后结果你要百分比还是 px，上面给出的链接是百分比，假如你要百分比的话，可以像这样推导：(n / grids) * 100% + (n - 1) * gutter。n 格所占总格数 (grids) 的百分比，加上 n 格之间 (n - 1) 个 gutter 的百分比。建议学习下 bootstrap 的栅格，蛮不错的。