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

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

比如,总格数为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


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


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

【热门文章】
【热门文章】