960 栅格系统
这是一个比较单纯的框架。从 1990 年代后期开始就基于表格的布局开始使用的栅格系统 960 Grid System。与早期计算机相比，虽然今天的屏幕分辨率达到了很高的尺寸，但使用 960 像素的宽度依旧可以确保在许多屏幕上能够正确显示。
960 Grid System，是由 Nathan Smith 开发的 CSS 框架，因为早期的电脑荧幕宽度约为 1024，扣除浏览器的卷轴及边框，为 960px，960 Grid System 有 12 栏位、16 栏位版本，960 正是意味着，12 能被 3、4、6 整除，能建立 3 栏、4 栏、6 栏的版面配置，网页的使用也比较灵活。网页版面可以轻松配置，合并，也不会有畸零数，非常适合排版。
960 Grid System 是使用固定宽度 960px，置中对齐画面的方式呈现在网页上，去除左右两边各 10px 的边距空间，留下中间 940 px 的设计内容区，以 20px 作为槽。
而超出 960 的部分的设计元素，就使用定宽设计。
Bootstrap 网页框架
今天市面上看见的响应式网站，多数使用了一些开源的代码或者框架。而应用最广泛的，就数 Bootstrap 了。
Bootstrap 是 Twitter 推出的一套强大网页框架，是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件，也提供了快速建立响应式网页的功能。已经更新到 V5.0.1 版本了 Bootstrap 中的栅格系统是一套响应式、移动设备优先的瀑布流式栅格系统。市面上很多前端框架会对 Bootstrap 进行补充或基于 Bootstrap 开发。
Bootstrap 提供的栅格系统，也是一样将内容区分 12 等分。
它将系统分为 12 列，当然也可以通过变量来改变列数和列宽，水槽宽度，屏幕浮动宽度；其实设置屏幕浮动宽度就是我们看到的屏幕自适应，就是根据屏幕宽度来选择显示参数。Bootstrap 中的栅格流只能作为大的布局定义，那么针对最小单位是该用 8、10、15 还是多少也是需要根据需求去做分析。
12 列结构可以进一步分解 4 等分，3 等分大小的模块。
- Bootstrap 英文网 https://getbootstrap.com/
- Bootstrap 中文网 https://www.bootcss.com/
栅格设计的第一步就是创建画布，对于不同设计的项目，宽度设定是不同的。需要注意第一屏重点内容全部显示，浏览器和 Windows 底栏都会占用屏幕的高度空间，第一屏缩减默认高度 -100px (可调整)。
屏幕宽度
设计师有存在从最大的屏幕 1920 着手设计界面的习惯，最后考虑最小的屏幕上的显示效果。这意味着绝大多数的设计都是从大尺寸开始设计的，通常大尺寸的内容和功能更全面。从小往大适配容易，但是从大往小适配问题就特别多。以 1920px 宽设计的界面在面向小尺寸屏幕的时候多数都很不友好，甚至到了部分页面无法正常预览和使用的地步。所以优先设计最小适配屏幕，然后给出适配方案进行调试。
C 端设计的屏幕宽度是找全网平均数值，而 B 端的目标受众更细分、更具体。类似政府、学校、企业等等，计算机都是统一购买的，这种情况并不需要你去统计全网和其它渠道数据，只要了解具体受众使用什么分辨率即可，以它作为主要输出的画布宽度。如果 B 端设计受众屏幕宽度实在不清楚，可以参考蚂蚁中台设计团队统一的画板尺寸为 1440。
是否定宽(版心)
如果是定宽的设计，便不需要考虑自适应与响应式适配屏幕宽度。版心是源用平面上的说法。根据实际情况，定宽设计如果以 1024 的屏幕为内容主体，1366、1440、1536、1600、1920 的屏幕适配 1024 的内容主体，多余的空间为左右大边距，这种方式设计上容易输出，适配方式更加高效，随之就是可用性较低，对于使用高分辨的用户来说，布局会留下很大的空白。如知乎：
还记得第一次做网页练习的时候我使用的定宽为 1000px。
2. 确定栅格区域屏幕终端的宽度不等于我们要栅格的宽度。我们在确定栅格区域设计前，先来熟悉一下 web 产品界面的基础模块和分层逻辑，以常见的 B 端布局为例。
根据模块自身属性及功能定义，常见的模块有九类，分别为顶部导航模块、左侧导航模块、页眉模块、页脚模块、主内容模块、左内容模块、右内容模块、抽屉模块、弹窗模块。
