默认栅格大小为多少_为什么栅格系统以8为基数

之前写过一个关于栅格系统的简述文章；现在来看只能作为简单的视觉布局参考，更多的是从排版布局的角度出发。最近被问到选择几作为栅格基数比较好这个问题，对此做一下整理。

其实栅格在各个平台开发布局中都有所定义。

浅析三大平台的开发布局方式

通俗介绍 简单了解一下开发布局中栅格的变革

Web端

Web端最常见的布局Bootstrap(https://v3.bootcss.com/css/)它是Twitter的设计师Mark Otto和Jacob Thornton合作开发的一款强大的前端框架；至今仍被广泛使用。已经更新到V4版本了Bootstrap中的栅格系统是一套响应式、移动设备优先的瀑布流式栅格系统。它将系统分为12列，当然也可以通过变量来改变列数和列宽，水槽宽度，屏幕浮动宽度；其实设置屏幕浮动宽度就是我们看到的屏幕自适应，就是根据屏幕宽度来选择显示参数。Bootstrap中的栅格流只能作为大的布局定义，那么针对最小单位是该用8、10、15还是多少也是需要根据需求去做分析。

iOS端

iOS布局方式很多，常用的可以归纳为Frame、Autoresizing、Constraint、StackView和Masonry五种；其中，Frame用来描述UIView的位置和大小；Autoresizing早期用来适配屏幕；Constraint比Autoresizing更加灵活，适配效果更好；了解一下，StackView它是iOS9时新增的一个视图类，可以把它理解成一个容器，添加到容器内的控件可以按照行或列进行布局。Masonry是一个轻量级的布局框架，是基于NSLayoutConstraint的一种第三方框架；通俗来讲用它实现适配布局更简洁更轻量。

Android端

先简单了解一下Android开发中的六大基本布局LinearLayout 线性布局：最常用的以垂直和水平方向的布局方式RelativeLayout 相对布局：可以基于父或兄弟控件来布局FrameLayout 层布局：就是控件盖控件的那种布局方式AbsoluteLayout 绝对布局：基于绝对坐标xy布局，无法自适应了解一下，TableLayout 表格布局：多行多列的布局方式GridLayout 网格布局：以网格的方式进行布局

在引入的表格布局和网格布局中其实就是为了更加方便系统栅格化

根据以上内容对于三大平台的常用布局做一个简单的分析

总结：Web端引入的Bootstrap、Android端的表格和网格布局以及iOS9之后引入的Stachview和Masonry都是为了能更好的适配以及进行系统的栅格布局；也体现了设计中需要栅格定义的重要性。

以上布局框架仅是从开发层面的一个布局演变，转换到设计中来，如何去定义？如何站在多个角度去思考栅格布局？

看到过很多关于栅格布局的文章，现在理解觉得有些片面，可能仅是作为从设计的角度去理解，很多的栅格方式都是从平面排版设计中的栅格演变过来的，基数可能比较随性，并且没有严格贴合系统去做。

栅格系统以多少为基数比较好，好在哪里？

站在巨人的肩膀上，还是从这三大平台来看，看一下官方给出的建议。

简单看一下Bootstrap的栅格参数，通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

由表知Bootstrap的默认水槽宽度是30px(每列左右是15px)，当然这些是可自定义的，Bootstrap的主要目的是为了适配屏幕进行自适应布局；我们设计时设置栅格的时候大多数情况下是以非自适应网页来做的栅格，栅格最小单位一般是10，15等不定参数；虽然Web端的可视范围比较大浏览方式和移动端不一样，但是我们发现针对一些内容较多的网页或者说对卡片内的信息去做布局，基数是10或15就会很难呈现出想要的效果。

8点栅格，以8为基数做栅格

以8为基数的栅格系统渐渐被使用，以8为基数 好在哪里？之前国外的一个博客中(spec.fm*一个开发者和设计师共同搭建的博客，设计细节中会从多个纬度去考量)， 有一篇文章(spec.fm/specifics/8-pt-grid)提到过使用8点栅格的好处。

*https://spec.fm/specifics/8-pt-grid

总结一下他们在Web端分析出的好处点有哪些

Bootstrap或其他的框架只作为一个大的布局系统，对于设计 没有一个设计单位去衡量 排版很难一致性，使用8点的好处在哪；对于设计：效率，减少决策，同时能保持元素之间的节奏。对于团队：开发人员更容易理解，在开发眼里8更有说服性。对于用户：一致审美，减少设备上出现模糊的半像素偏移问题。

iOS端

我们来看iOS的 Human Interface Guidelines 如何去给出布局建议。iOS是个封闭的系统，在 Human Interface Guidelines 可以看到iOS使用Auto Layout自动布局，iOS的系统完全自主更新，终端设备也完全由自己决定，因此系统可以做到强制规范化。但在这里提到的基数也是 8 。

在布局中说到的约束，就是我们来定义的栅格基数，他举的例子是 8。

下边我们找一下iOS官方组件，看一下自适应布局的限制区域是不是基数 8。

在Sketch中置入一个iOS官方页面组件将其拆解：

其实我们发现在iOS系统设计中的基数也是以8为基准。

上边说到的 Spec.fm 中的那篇文章中有提到Points，关于iOS的@1x，@2x，@3x图，用 8 为基数可减少出现是奇数造成一像素偏移模糊的情况；

Android端

Android端的 Material Design 布局给出的建议。

在 Material Design 给出的建议中是以8dp为基准，小的控件以4dp为基准。

Material Design 定义的栅格布局更像Bootstrap，它可以适应多平台，结合它丰富的视觉语言能搭建出更加严谨的移动应用或网页。

站在巨人的肩膀上，

从以上三大平台来看，移动端官方给出的建议都是以8为基准。

从以上分析；我个人觉得，从系统的角度，首先要保证是偶数；只研究移动端平台：2、4、6、8、10；其实 我觉得用2的次方计算也会更加贴合系统运算：2^1、2^2、2^3、2^4:2、4、8、16；

在这些数字中2作为基数太小了我们视觉能看到的2个点太小，并且使用起来很麻烦每次都要进行计算；

那么10或16作为基数又太大了，在移动端很难避免信息过多小屏幕需要考虑排版的问题；取在这两组数中的交集还剩下 4 和 8 ；以上Material Design给出的建议中也是以8为基准，小的控件以4为基准。

所以从很多角度来看 8 点栅格是最为理想的栅格基础单位

下面再总结一下8点栅格的好处：1、Web端布局更加灵活。2、视觉一致性，保证元素之间的节奏。3、减少出现奇像素偏移造成模糊。4、开发更容易理解的数字8。5、能被最多的屏幕尺寸整除适配，这也是Material Design和iOS建议的主要原因之一。

Thx