关于实际栅格和设计如何模拟实际栅格

这句话听起来是比较绕的,我下面来实际的解释一下

不知道设计师在做B端网格的时候有没有遇到,在做BI画布的时候,你的所有组件需要放在12*12px的格子上,但是每一条线的本身是有厚度的,一般线的厚度为1px,那么两个格子加起来为1+12+1=14px,这样是实际超过12px,放个图感受下

在内容12*5=60的组件放在间距12px的格子上时,完全不能够按照规定来;

接下来我在想,如果间距为10px呢?

加上两边的厚度不就正好为12px吗?

如图所示,问题来了,只有第一个格子是合适的,后面的间距越来越夸张从第二个开始,每个格子查出去2px;

尝试了上面两种方式后,找到了更为合理的适合设计的方案,用11px,就可以完美解决设计对其问题

虽然看起来是压2线漏2线,但是实际上设计是完全匹配的

那么你可能会有这样的疑问,这样奇怪的对齐方式是正确的吗,开发怎么做呢?

这个问题我也考虑过了,在开发,其实完全不存在厚度为1的这种情况,所有的网格线都是没有厚度的,但是设计不可以,不可能做到,所以用这种方式,使得设计更美观更规范是必不可少的

你可能感兴趣的:(关于实际栅格和设计如何模拟实际栅格)