咱们好，我是子璐。今日为咱们共享的是栅格系列，结合我自己后台规划的经历，关于栅格文章我分为上下两篇。

  在 1692 年时，法国国王路易十四因为国家印刷水平差强人意，命人成立了一个办理印刷的皇家特别委员会。

  他们以罗马体为根底，选用方格为规划依据，每个字体方格分为 64 个根本方格，每个方格再分为 36 个小格，一个印刷版面就有 2304 个小格组成。

  再后来，逐步演变成运用固定的格子规划版面的平面规划风格，平面规划中称之为网格，这便是栅格的雏形。

  互联网开展之后，界面规划将这一概念借用过来，简易的了解栅格便是一种有规矩的参阅线. UI中的栅格

  网格与栅格的实质其实是相同的，都以英文单词“Grid”来表明，平面规划中称为“网格”，而在网页端或移动端中称为“栅格”。

  ：平面规划一般用到的纸张标准（尺度），不管是英国、美国、日本或ISO选用的德国DIN纸张标准全部都是固定的尺度，宽度和高度都是固定的，也便是肯定的。

  栅格尺度是改动的：而网页或App的设备尺度不是固定的，其横向宽度受限于设备宽度，由设备屏幕宽度来决议，而纵向高度则是跟着内容的多少来决议的。

  考虑到实在规划场景下，可能会运用无限下拉交互方法承载凌乱内容的规矩。所以往往只需求拟定纵向列式切开规矩，以标准 X 轴向内容的对齐、份额等布局作用。

  规划更有次序和节奏感，页面信息的展示愈加明晰，然后进步用户的阅览和阅览功率，供给更好的用户体会。

  协助规划师快速校准元素在界面内的方位，节省了根底操作上的时刻，如移动元素、核算间隔等。一起也避免了间隔凭规划师感觉形成纷歧致的现象。

  栅格体系进步了网页的标准性。一方面能够协助开发同学躲避惯例的横向间隔类问题（纵向间隔问题首要受字体的设置影响），以进步规划复原度，另一方面有利于开发人员对组件和模块的复用，进一步进步功率。

  栅格能够辅导页面在多渠道多屏幕尺度下的响习惯规划，便于与开发对接，说明活动布局或端点布局等适配计划，确保复原度的一起下降交流本钱。二、栅格的构成

  列的宽度称为列宽，常用百分比来界说，而不是固定值（运用固定栅格的时分会选用固定值，会在下篇呼应式栅格中讲到），前端同学经过百分比能够灵敏习惯屏幕巨细。

  ：也被称为沟/间隔，水槽是相邻两个列宽之间的间隔，用来切开内容，水槽的值越大，页面中留白部分的面积越多，视觉作用越松懈。

  。左右大边距是核算在栅格的总宽之内的，边距值的巨细决议了每个屏幕尺度的最小呼吸空间，一般边距值≥水槽值。

  ：栅格的根底单位，栅格内容元素和布局规矩（如水槽、边距的值）都是依据它的整数倍递加的。如最小单位是8px，水槽的宽度可设为8n。

  列数：列的数量即栅格数量，如12栅格就有12列、24栅格就有24个列。列数n越多，那么排布在版面内的内容就越精密，经过操控列数，就能够操控版面的留白和呼吸感。

  总宽度：页面中自习惯内容部分容器宽度，而非屏幕宽度，总宽度=列宽*列数n+水槽*（n-1）+边距*2。

  以下图数据总览页面为例，规划稿尺度为1440*900px，左边导航栏常驻，该页面是没有用栅格树立的。

  乍一看问题好像不大，可是资深的规划师很简单就能看出实则切开紊乱，无规则。

  另还有一丧命的点在于填充内容的容器无法换算成百分比，前端同学无法做自习惯，想要适配是很困难的。

  规划师在规划产品用户界面时，首要需求考虑页面的全体布局，以便承认布局栅格的容器。

  栅格容器纷歧定是整个屏幕或界面，需求依据实在场景判别，一般只需求在内容层进行栅格化，束缚内容自习惯份额。

  存在常驻的控件，如侧边导航栏一般归于固定占位的控件，不会跟从屏幕尺度或内容量的改动而改动，归于大局操控层。其占有的界面区域也不需求用来布局其他功用及内容，所以其不归于栅格区域。有赞的协助中心同理。

  ：在盛行的前端开发开源东西库Bootstrap与Foundation中广泛运用，适用于事务信息分组较少，单个盒子内信息体积较大的中后台页面规划。

  12栅格的优势在于其在相对较小的数字中最简单被整除，确保了规划师切分区块的灵敏性，一起又不至于使页面过于琐碎。

  适用于事务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面规划。

  相对12栅格体系，24栅格体系改动愈加灵敏，更适宜内容比较多样凌乱的场景。咱们常见的中后台规划发布于 PC 渠道，且功用凌乱，内容繁复，且考虑到后期的扩展性。

  因而中后台常用灵敏性更高的 24 栅格，比方ant design和zan design，栅格体系巨细=24列+23列间隔+2大边距。

  因为列跟水槽的宽度是以网格作为根本单位来添加或许减小，所以栅格化的重要一步便是需求先界说好栅格的原子单位网格的巨细。中后台中现在最普适易用的便是 8 点网格，咱们能够树立 8点为一个单位的网格，运用 8 的倍数来界说模块的间隔与元素的尺度。

  在适用性方面，4、6、8、10 这四个数值都是根本能够满意的，在灵敏性方面，4pt体现最佳，那为什么不选4而是8呢？

  （1）现在干流桌面设备的屏幕分辨率在竖直与水平方向根本都能够被 8 整除，运用 8 作为最小原子满意普适。能够确保不同布局之间的视觉共同性，一起能够灵敏的适配多种尺度的规划。

  可是运用4pt页面就会被切开的十分细碎，在规划时比较难于把控，它比较适宜页面内容信息较多，布局排版比较凌乱的产品。

  而8pt栅格一般的规划场景都能够很好的满意，比较适宜大多数的项目，因而是比较引荐运用的。

  （3）开发工程师运用的前端开源组件库比方 Metronic、Antdesign 等也是依据 8 的原子单位来规划。

  因而假如规划师也运用以 8 为根本单位的栅格体系，开发与规划师彼此对接就会愈加便利，开发完成页面时也能更高品质地去复原咱们的规划。

  依照亲密性准则，咱们能够依照8n界说几个常用的间隔值。人眼关于间隔的认知不是均匀、等分的，而是突变的，经过比照几种经典的数列模型，挑选依据斐波那契数列生成一组数组作为间隔值，得到8、16、24、40系列数值。

  经过实践经历，在中后台体系下，水槽宽度为16px时，页边距为24px时视觉作用最佳。

  ：此刻列间隔在确保页面空间被高效运用的一起，也能够保持杰出的呼吸感，不至于让内容过于紧凑。

  ：需求经过间隔区别模块与模块之间的信息，一起也让内容区愈加紧凑。3. 运用栅格公式核算栅格体系

  栅格核算公式如下：内容区宽度=24栏+23水槽+2页边距=屏幕宽度-左边导航宽度。

  依据前文屏幕宽度为1440px，选用24栅格布局，页边距取24px，水槽取16px的前提下。

  经过对栅格公式的核算，将详细的值带入公式：1440-左边导航宽度=24栏+23*16+2*24。

  树立好栅格体系后，就能够依据自己的实践事务，在栅格体系上安排内容分配页面份额了。

  咱们把页面上终究承载内容称为“盒子（Box）”，这个盒子的宽度则由栏目与水槽按份额组合得到，高度则由内容多少决议。

  在栅格体系上包容事务内容的容器咱们把它称之为盒子（Box），栅格体系上的盒子其实跟前端工程师写页面时用到的盒子是共同的。如图所示，当咱们阅览任何一个网页时，右键;查看元素（检查元素），然后在style菜单下就能够看到这个盒子结构了。

  便是主体内容间隔盒子外侧的间隔，（主体内容能够是一个按钮、一段文本、一张图片或许一个表格等）。

  了解完栅格体系的盒子模型之后，下一步咱们需求依据详细事务内容来确认盒子的宽度。

  以24栅格体系为例，一个24栅格体系能够依据事务需求被2等分、3等分、4等分、6等分、8等分、12等分。

  上图中只列举了部分份额，同一个页面上操控在5组以内的份额值组合来布局比较适宜，组合方式过多页面就会显得琐碎、凌乱，不利于阅览和运用。

  No、No、No。当然要物尽其用，前文中咱们界说栅格原子单位为8，这意味页面上各元素间隔的改动也应遵从8n的规则，当然也就包含每个盒子卡片里的内容。

  共同的改动规则让页面赋有节奏感跟韵律感，在进步页面共同性的一起也减少了规划决议计划本钱。

  栅格体系中水槽与边距的改动遵从8n的改动规则，此处n为大于0的正整数，即n=1、2、3…。用于标准元素间隔的8n，n取整当然最佳，但也能够依据事务状况取0.5、1.5。

  原因是实践工作中，咱们面对的状况是凌乱的，这样处理能够让间隔的设定习惯一些特别的场景，然后使其更灵敏普适。

  栅格体系大的层面能够协助规划者更好的进行版式规划与内容布局，而小的方面能够辅佐规划师标准页面内各种元素的对齐与间隔的设定。

  从用户体会视点来讲，这两者平等重要，从履行层面来讲，咱们一般先做版式规划与布局，然后再填充内容、调整细节。

  A1：理论上来说，能够经过调整固定区域如导航的宽度来改动内容区域的巨细，使列宽能够整除，且边距和槽宽能被最小原子单位（如8）整除。

  但假如依然出现无法整除的状况，能够优先调整页边距的数值，无需寻求彻底整除。

  只需让用户感受到的是页面全体出现出来的节奏与韵律感，以及共同的视觉言语带给的谨慎就满意了。

  盒子模型填充栅格时，盒子对齐的是栅格仍是水槽，里边内容的元素也要平等对齐吗？

  A2：盒子模型对齐的是栅格而非水槽，而这个盒子里边的内容元素不受栅格的束缚。

  只需父级模块对齐栅格，子级元素能够不对齐水槽，一起子模块也能够有自己的栅格体系。

  A3：并不是，栅格用在典型页面工作台、数据概览、卡片页居多，非惯例规划时不需求栅格体系。

  甚至在特定状况下，咱们也能够打破布局栅格设置，来安排页面内容。打破布局栅格能够使元素杰出，招引视觉焦点（比方：全站横幅，或是商场运营类内容）。