网页的栅格系统设计 第1篇
使用偶数来调整元素尺寸或者元素间距，能很好地适用于所有屏幕尺寸。举个例子，在 倍尺寸下，如果你使用奇数来定义元素尺寸和间距，很容易会多半个像素。如果一倍图下的 5px 以 倍的尺寸导出，很容易会多半个像素。选择 8 作为基数的原因是大多数屏幕尺寸可以被 8 整除，所以很容易兼容适配。此外，基数 2 或基数 4 不在电脑端使用，因为颗粒度太小，不方便设计师操作。另外一个使用基数 8 的优点是避免我们在设计中太过纠结。
网页的栅格系统设计 第2篇
你有没有好奇过为什么我们在设计手机界面时选择了非常小的绘制画板，但是我们的显示设备却非常大？
举个例子，我们使用 375 × 812 大小的画板来设计 iPhone X 的界面，但是 iPhone X 屏幕实际尺寸大小 1125×2436 —— 即我们设计尺寸的三倍。
因为设计尺寸最后是以两倍或三倍像素渲染导出。比如，iPhone X 会以三倍尺寸呈现，iphone 8 或 iphone XR 会以二倍尺寸呈现。因此，我们可以使用最小尺寸的一倍来设计，去适应不同设备不同的尺寸。因此，1pt 可以分别被转化为@1x (一倍图)、 @2x (两倍图)和@3x (三倍图)的 1px、4PX 或 9px。
所以我们设计一个 16pt 大小的图标时，我们导出的二倍或三倍尺寸就是 32px、48px。
网页的栅格系统设计 第3篇
实现优秀网页布局的最佳方式是运用栅格系统。网格是设计的骨架，帮助我们有序地对齐和组织网页内容。通用正确地使用网格，我们不会随意地在页面中放置元素，相反，我们会很清楚知道将这些元素放在合理的位置，使得有助于提高设计效率和设计质量。无论是为电脑端还是手机端设计，使用网格可以引导我们做出设计决策、并为用户创造更好的体验。
网格由列（column）、槽（gutter）、安全边距（margin）组成。它们在一起形成了屏幕的宽度尺寸。
Column 是跨越内容区域的垂直部分。网页设计中有的列（column）更多，网格就更灵活。列的宽度由设计师自己决定。传统的做法是在电脑端页面中使用 12 列，Pad 端使用 8 列，手机端使用 4 列。列的宽度一般在 60px～80px。列宽是影响实际内容区域宽度的关键因素。
槽（gutter）是列（column）之间的间隙。槽的作用是垂直地划分每个模块的内容。更宽的槽更适用于大屏设备。更宽的槽可以用来增加页面的间距，让页面信息可以被展示得更加舒展。
安全边距（margin）是内容和屏幕左右之间的间隔。更宽的安全边距更适合较大的屏幕，因为他们可以围绕内容区域给出更多的白色区域。
上面介绍了 3 个概念之后，我们可以使用基数为 8pt 的网格系统来风格页面。8pt 网格系统使用 8 作为基础单位来调整网页元素的大小和间距。这意味着，网页上的高度或宽度、距或者内边距，都是 8 的倍数。
网页的栅格系统设计 第4篇
利用栅格断点特性进行排版，可以简化列的大小，而不需要批定显式的列宽，如强制写为：.col-sm-6。
下面的列子，展示了一行两列与一行三列的布局，从xs（如上表如见，实际上并不存在xs这个空间命名，是以.col表示，下同不再注）到xl（即.col-xl-*）所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。
等宽列可以分成多行，但是有一个Safari旧版浏览器的flexbox错误，阻止它在没有显示flex-basis或border（影响到边框效果）。 Bootstrap非官方的一个实例，已经介绍了两种解决方法，但如果是最新safri浏览器下，则不需要这样做。
下面是等宽列两行的处理方法，引用w-100进行切割分行：
在Flexbox的布局上，拥有很多现代特征，比如自动布局和列宽处理。你可以在一行多列的情况下，特别指定一列并进行宽度定义，同时其它列自动调整大小，可以使用预定义的栅格类（如下所示），从而实行栅格宽或行宽的优化处理。注意在这种民琣上，无论中心定义列的宽度如何，其他列都将调整大小。
使用 col-{breakpoint}-auto 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。.
创建跨多个行的等宽列，方法是插入.w-100要将列拆分为新行。通过混合.w-100一些还可以影响一些显示状态效果,如按钮排序等。
译者注：这部份其实和上面safri浏览器bug讲解重复了，但官网如此保持尊重。
又注：.w100似乎与.clearfix有时可以达到同样的网页效果。
网页的栅格系统设计 第5篇
1919年德国著名建筑家沃尔特·格罗佩斯（Walt Gropius）在魏玛建立国立包豪斯学院。包豪斯的平面设计基本是在荷兰“风格派”和俄国“构成主义”的影响下形成的。因此，具有高度理性化、功能化、简单化、减少主义化和几何形式化的特点。
1928年，朱斯特·施密特（Joost Schmidt）发展出了一套新的理性设计系统和方法。
20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣传，将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响世界各国，因此也被称为“瑞士平面设计风格”（Swiss Design）。由于这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此又被称为“国际主义平面设计风格”（International Typographic Style）。
1965年，在美国的芝加哥成立了一家新的平面设计公司——尤尼马克设计公司（Unimark），主要设计人员包括有拉尔夫·依克斯特朗姆（Ralph Eckerstrom）、詹姆斯·佛格曼（James Fogleman）、马西莫·维格涅里（Massimo Vignelli，1934-）等。尤尼马克设计公司的设计思想基本是国际主义的：强调平面设计上的标准化，采用方格网络为设计依据，目的是良好的视觉传达功能。这家公司发展很快，不久就成为一家拥有402名工作人员、在全世界设有48个设计事务所的大型国际设计公司。国际主义平面设计在这家公司的业务中得到很大的成功，而企业的规模又使得这个风格在世界各地得到进一步推广。
现在，大多数平面设计软件都有“网格”功能。
栅格简概
栅格的意义
统一产品的视觉认知，减少学习成本。提升布局规律性，页面更有秩序，信息展示更清晰，以提高用户的体验。
模块化复用，提升协作效率。从设计流程开始，统一规则，制定规范， 避免各种主观上的“感觉”造成视觉上不统一的现象，比如：模块大小、间距等。在开发阶段栅格设计系统提高了设计还原度，使网页更具备规范性，开发对组件和模块的复用，进一步提升了效率。
栅格的组成
列、水槽、边距
列Column：也被称为栏，用来盛放文本、表格、图片等内容及元素。列的宽度称为列宽，常用百分比来定义，而不是固定值（使用固定删格的时候会采用固定值，会在下篇响应式栅格中讲到），前端同学通过百分比可以灵活适应屏幕大小
水槽 Gutter：也被称为沟/间距，水槽是相邻两个列宽之间的间隔，用来分割内容，水槽的值越大，页面中留白部分的面积越多，视觉效果越松散；反之，页面越紧凑。水槽通常设为固定值
边距 Margin：网页内容和屏幕边缘之间的间隔，通常为固定值。左右大边距是计算在栅格的总宽之内的，边距值的大小决定了每个屏幕尺寸的最小呼吸空间，一般边距值≥水槽值。
此外还有最小单位、总宽度、列数三个计算因子
最小单位：栅格的基础单位，栅格内容元素和布局规则（如水槽、边距的值）都是基于它的整数倍递增的。如最小单位是8px，水槽的宽度可设为8n
列数：列的数量即栅格数量，如12栅格就有12列、24栅格就有24个列。列数n越多，那么排布在版面内的内容就越精细，通过控制列数，就可以控制版面的留白和呼吸感
总宽度：页面中自适应内容部分容器宽度，而非屏幕宽度，总宽度=列宽*列数n+水槽*（n-1）+边距*2
三、案例-搭建栅格
以下图「数据总览」页面为例，设计稿尺寸为1440*900px，左侧导航栏常驻，该页面是没有用栅格搭建的。乍一看问题似乎不大，但是资深的设计师很容易就能看出实则切割混乱，无规律。另还有一致命的点在于填充内容的容器无法换算成百分比，前端同学无法做自适应，想要适配是很困难的。
那下面将以此页面为案例教大家如何一步步搭建栅格：
Step 1: 确认容器范围
设计师在规划产品用户界面时，首先需要考虑页面的整体布局，以便确认布局栅格的容器。栅格容器不一定是整个屏幕或界面，需要根据真实场景判断，一般只需要在内容层进行栅格化，约束内容自适应比例。
1) 单页基础布局：栅格容器=屏幕宽度
2) 存在固定控件布局：栅格容器<屏幕宽度
存在常驻的控件，如侧边导航栏一般属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，属于全局控制层，其占据的界面区域也不需要用来布局其他功能及内容，所以其不属于栅格区域。有赞的帮助中心同理
案例属于侧边导航布局，所以案例容器范围=屏幕宽度-侧边导航=1440-侧边导航
Step 2:确定列数、水槽值、边距
1）确定栅格列数
目前有两种比较主流的等分方式：12等分与24等分。
12等分的栅格系统：在流行的前端开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计；12栅格的优势在于其在相对较小的数字中最容易被整除，保证了设计师切分区块的灵活性，同时又不至于使页面过于琐碎
24等分的栅格系统：适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计；相对12栅格系统，24栅格系统变化更加灵活，更适合内容比较多样复杂的场景。我们常见的中后台设计发布于 PC 平台，且功能复杂，内容繁多，且考虑到后期的扩展性，因此中后台常用灵活性更高的 24 栅格，比如ant design和zan design，栅格系统大小=24列+23列间距+2大边距
所以，案例中我们将采用24栅格系统
2）确立栅格的最小单位
由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位「网格」的大小。中后台中目前最普适易用的就是 8 点网格，我们可以建立 8点为一个单位的网格，使用 8 的倍数来定义模块的间距与元素的尺寸。
在适用性方面，4、6、8、10 这四个数值都是基本可以满足的，在灵活性方面，4pt表现最佳，那为什么不选4而是8呢？8 点网格有如下几点优势：
目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被 8 整除，使用 8 作为最小原子足够普适。可以确保不同布局之间的视觉一致性，同时可以灵活的适配多种尺寸的设计
灵活性方面，4pt最佳，8pt次之。但是使用4pt页面就会被分割的非常细碎，在设计时比较难于把控，它比较适合页面内容信息较多，布局排版比较复杂的产品。而8pt栅格一般的设计场景都可以很好的满足，比较适合大多数的项目，因此是比较推荐使用的
开发工程师使用的前端开源组件库比如 Metronic、Antdesign 等也是基于 8 的原子单位来设计，因此如果设计师也使用以 8 为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质地去还原我们的设计。
3）确定水槽宽度和页边距
按照亲密性原则，我们可以按照8n定义几个常用的间距值。人眼对于距离的认知不是均匀、等分的，而是渐变的，通过对比几种经典的数列模型，选择基于斐波那契数列生成一组数组作为间距值，得到8、16、24、40系列数值，为了区分它们的使用场景我们依次为其命名为XS、SM、MD、LG、XL。
经过实践经验，在中后台系统下，水槽宽度为16px时，页边距为24px时视觉效果最佳。
水槽=16px：此时列间距在保证页面空间被高效利用的同时，也可以维持良好的呼吸感，不至于让内容过于紧凑。
页边距=24px：需要通过距离区分模块与模块之间的信息，同时也让内容区更加紧凑
Step 3:利用栅格公式计算栅格体系
栅格计算公式如下：内容区宽度=24栏+23水槽+2页边距=屏幕宽度-左侧导航宽度
基于前文屏幕宽度为1440px，采用24栅格布局，页边距取24px，水槽取16px的前提下。通过对栅格公式的计算，将具体的值带入公式：
1440-左侧导航宽度=24栏+23*16+2*24
Step 4:组织内容，分配页面比例
建立好栅格系统后，就可以根据自己的实际业务，在栅格系统上组织内容分配页面比例了。我们把页面上最终承载内容称为“盒子（Box）”,这个盒子的宽度则由栏目与水槽按比例组合得到，高度则由内容多少决定。
拓展小知识：盒子的概念
在栅格系统上容纳业务内容的容器我们把它称之为盒子（Box），栅格系统上的盒子其实跟前端工程师写页面时用到的盒子是一致的。如图所示，当我们浏览任何一个网页时，右键>检查元素（审查元素），然后在style菜单下就可以看到这个盒子结构了。
Padding就是主体内容距离盒子外侧的距离，（主体内容可以是一个按钮、一段文本、一张图片或者一个表格等）；Margin就是相邻两个盒子的距离，对应在后台栅格系统就是水槽的大小
了解完栅格系统的盒子模型之后，下一步我们需要根据具体业务内容来确定盒子的宽度。以24栅格系统为例，一个24栅格系统可以根据业务需要被2等分、3等分、4等分、6等分、8等分、12等分，还可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不对称分割。
上图中只列举了部分比例，同一个页面上控制在5组以内的比例值组合来布局比较合适，组合形式过多页面就会显得琐碎、杂乱，不利于阅读和使用。因为盒子的高度根据内容来定，故图中没有体现高度这一维度的变化规律
根据具体业务内容最终得出下图中的盒子的具体比例
最终效果如下：
到此，我们的栅格系统就搭建完成了，但是这就结束了？
网页的栅格系统设计 第6篇
当提及网格的使用，我们可以追溯到很久之前。古埃及人在雕刻和绘画中描绘人物时遵守着将人的拳头定为尺度的规则 —— 站立的人物从地面到头顶有 18 个拳头那么高。
活字印刷首先约于公元 1040 年左右在中国发展，中国的瓷器用作了活字印刷的字符。
在西方，金属活字印刷技术首先出现在约 1450 年，1455 年左右古腾堡圣经的出版是出版业的第一个重要里程碑。金属字体文本可以更好地利用网格。
在 1917 年，网格在 Theo van Doesburg 和 Piet Mondrian 引领的荷兰风格主义（新塑性主义）运动中最为明显。他们将画布限制为垂直相交的垂直线和水平线以及原色。
1919 年，德国的包豪斯学派成立，他们简洁实用的设计理念也采用了网格的概念。就像著名的包豪斯国际象棋一样，它的棋子都是简单的几何形状，例如正方形和长方形，可以紧密地组合在一起，以实现紧密的存储。
在 1950 年代，在瑞士终于形成一个全新的平面设计风格。这种设计风格力求通过简单的网络结构和近乎标准化的排版来实现设计上的统一。直到如今，这种风格仍继续影响着许多网页和平面设计师。
随着第二次世界大战的结束，一种新的消费主义出现了。伴随着高速经济发展，广告业逐渐繁荣。Paul Rand 作为美国第一位使用了瑞士平面设计风格的商业艺术家，以他的企业 logo 设计和商业广告设计而闻名。网格在这全新的广告形式中发挥了重要作用。
今天我们将讲一讲网页设计中的网格系统。它听起来很简单，但是实际上包含了一大串复杂的概念。网页设计中的第一步是如何布局。哪里是标题、导航和按钮？这些元素之间要多少间距？这些都离不开页面布局。作为网页设计的基础，页面布局可以极大地影响用户阅读的流畅度和直观性。在我们讲页面布局之前，我们需要先科普一些概念。
网页的栅格系统设计 第7篇
用Bootstrap的源Sass文件时，你可以选择使用Sass变量，或者mixins，以创建自定义的、语义化的、响应式的网页布局。我们的预建类使用相同的变量以及mixins，为快速响应布局提供整个现成的套件。
变量决定列的数量、缝隙宽度以及切换到浮动列的媒体查询点，们用这些来生成上文提及的预定义网格列，定制出如下所示的自定义mixins：
MMixins用来联合网格变量，为每个网格列生成语义化的CSS。
你可以将变量修改为你自己定义的值，或者直接使用mixins的默认值。下面例子即使用默认设置创建两列布局以及一个列与列之间的缝隙：
使用BootStrap v4内置的栅格系统之Sass变量和 maps文件，可以完全自定义自己的栅格格环境、并可以更改DIV层次、媒体查询维度和container容器宽度，然后重新编译。
以通过修改Sass变量、重定义栅格系统列的数量，使用$grid-columns命令可生成每个单独列的宽度（以百分比表示），同时$$grid-gutter-width允许在平行排列$padding-left和$padding-right对于平台间隔均匀分割的断点特定宽度。
超越自我，您还可以自定义网格层数。如果你只想要四个格子层，只要更新$$grid-breakpoints和$$container-max-widths等类参数。
对Sass变量或map文件进行任何更改，都需要保存更改并重新编译。这样做将为列宽度，偏移量和排序输出一组全新的预定义栅格类。响应可见性实用程序也将更新为使用自定义断点，同时濂晨设置网格值时是采用px单位（而不是rem、em或%）。