antd option宽度自适应_从栅格到响应式或自适应布局

第56篇原创

   UI设计  

先来简略的说说栅格是什么？

栅格始于印刷排版，利用栅格很好的达到画面的平衡性。最新提出网页栅格的是bootstrap，然后渐渐发展了起来。

栅格有什么用呢？

栅格可以更好的达成页面的平衡性，并更高效的实现对齐。就是元素的摆放会更有条理，也更有说服力和可读性。可快速实现卡片式布局等。

如何设置栅格？

在Sketch里面有个布局设计，计算好尺寸后把数值输入即可。栅格包含外边距，列宽、沟宽、列数等。这些基本的就不赘述了。

栅格设置的依据是什么？为什么要这么设置呢？

若是仅是用于设计本身，那么其大概就会遵循格式塔的一些原则，比如相似、相近等，还有一些排版本身具备的对称性等。

若是需要落地后也有设计稿的效果，那么就不只需要遵循这些基本规则了。

当开发不使用任何框架的情况下，设计师的栅格可以被开发实现。但是，转而言之，现在框架挺全面，web端不使用任何框架进行开发的团队