屏幕宽度并不等于栅格的宽度，大多数情况下，我们会基于1920、1440这两个尺寸来定义设计稿的宽度，但真正放置信息内容的区域并非设计稿尺寸，需要做到多平台、多尺寸显示器的适配，通常会将栅格宽度定义在1024px~1400px之间。

例如：常见的1024px、1200px、1280px、1400px等，可满足绝大多数主流显示器，如果栅格宽度超过1400px，在很多笔记本电脑上浏览页面时，会出现左右滚动条，体验非常不友好。

2. 选择栅格列数

1）12栅格

12列栅格很常见，一些业务信息分组较少的商业网站、门户网站等使用的就是12栅格，它能够被2、3、4、6 整除，很容易满足信息较为复杂的等分布局场景。

另外，针对不对称布局的容器组合也能将信息体现的很和谐，如双栏布局使用4 8、3 9栅格，三栏布局使用2 8 2、3 3 6 栅格等，变化较为灵活。

2）24栅格

24列栅格适合信息量大、分组多且多样复杂的使用场景，很多视觉区域较大、需要精细化布局的B端Web设计采用的就是24栅格，相比12栅格，有更多的区域划分空间，其布局的灵活性也更强。

需要注意的是，24栅格因列的数量比较多，很多时候列宽无法被精准整除，不过相差的像素数值极小，往往无法被用户肉眼觉察，无伤大雅。栅格本身的目的就是为了保持视觉效果的协调与统一，并非为了死磕某个像素，特殊情况区别对待即可。

3）5栅格

5列栅格一般用在移动端设计中，因设备屏幕的横向空间有限，所以很少使用，例如：针对“金刚区”的5图标（一行）、10图标（两行）的规范化排版。如果想进一步追求后续的灵活性、避免奇数的不便，也可将5列栅格拆分成10列，布局、视觉效果基本能保持一致。

其实在实际设计中，设计师们大多会使用间距来规范界面的排版与布局，相比5列栅格会更灵活、更便捷。