网页栅格如何制作 第1篇
栅格就是网格，就是这种有规律的格子。
手把手教你做规范--布局规范（栅格）
哈哈，这样一说是不是就很接地气了。英文翻译过来就是网格，至于现在为什么叫栅格就不得而知道。
手把手教你做规范--布局规范（栅格）
栅格最早是应用于平面设计中，产生于二十世纪初的西欧，完善于五十年代的瑞士，通过有规律的网格来指导版面布局。
栅格设计的在屏幕端的应用也十分广泛，不光为设计服务，对响应式开发也起到了很大的作用。虽然开发小哥说的栅格和我们理解的不太一样，但也减少了沟通成本。
网页栅格如何制作 第2篇
目前，很多软件提供自动栅格设置功能，sketch也提供这样的功能：Layout Settings。
Total Width：相当于 Container，是内容区的宽度。
Offset：表示栅格的偏移量，表示栅格从哪里开始。
Number of Columns：表示栅格的数量。
Gutter on outside：记得勾选。勾选以后栅格的设置才是跟前端的栅格算法匹配。
Gutter Width：槽的值，通常是定值，控制页面留白间隙。
Column Width：列的值（栏+槽），也就是栅格单个内容区的宽度。
网页栅格如何制作 第3篇
强调主要内容：T型导航布局将主要内容放置在顶部，使其在页面中更加突出和易于访问。
导航与内容结合：T型导航布局将次要的或次级的导航放置在主要内容的侧边或底部，使用户可以根据自己的需求选择性地查看详细信息。
提供导航和辅助功能：T型导航布局通常在顶部提供导航菜单、搜索栏等辅助功能，方便用户进行导航和操作。
缺点：
空间利用相对较低：T型导航布局在页面上占用较多的垂直和水平空间，因此对于较小的屏幕可能无法展示全部内容。
响应式设计挑战：T型导航布局需要在不同屏幕尺寸和设备上进行响应式设计，以保持合适的布局和舒适的用户体验。
需要根据具体的设计需求、目标用户和设备上下文来选择适合的布局方式。在实际设计中，可以结合上述布局方式的优点，并充分考虑响应式设计的要求，以提供良好的用户体验。
2. 选择栅格的列数
我们在做栅格系统的时候可以使用在这个网站你可以根据不同宽度的网页来制定你要的列宽和间距，这就是栅格系统，一个网页版的田字格，可以根据不同的网页风格调整内容宽度，产生不同间距和不同列宽。常见的栅格有12栅格、24栅格、当然也有其他特殊的类型比如移动端的6栅格、5栅格和特殊的4栅格等（栅格只是作为参考要根据项目需求灵活调整）。
12栅格和24栅格使用比较多，为什么是12栅格和24栅格不是10栅格，14栅格呢？
因为12栅格和24栅格可以被2、3、4、5、6等这些数字等分，可以最大程度的满足各种等分布局的需要。
3. 定义水槽（Gutter）和边距（Margin）
水槽（Gutter）是列与列之间的间距，定义的方式可以以8px为最小单位进行推倒，如8px、16px、24px、32px、40px…等，这样定义的好处可以保持视觉上的一致性，根据产品的调性以及设计风格来决定水槽的数值（没有绝对值）。
4. 定义8pt间距系统
在查看了很多页面中的代码布局，大部分都是保持8的倍数，统一设计到开发的布局语言，减少还原度损耗，经过验证，可以在一定程度上，帮助我们更快更好地实现布局空间上的设计决策。
通常我们定义间最小单元格数值时需要考虑两个方面：
a.第一点考虑硬件问题，在当前市面上的屏幕有很多类型尺寸，屏幕宽度可以整除的数值
b.第二个点需要考虑数值的灵活性，不方便设计时使用的数值不被选择
数值4、6、8、10这四个值基本都可以满足，灵活性方面4px效果上最佳，但是页面会被分割的非常细碎，设计时不太好把控，看起来也不是很大气。因此我们需要根据实际情况和场景选择合适的数值，4px或者6px适合使用在业务比较复杂的产品中页面排版或移动端中使用；8px单元格可以满足大多数项目中的场景，因此比较推荐使用8px。
5. 屏幕尺寸选择
根据百度统计的数据显示，2019年10月份我国网民访问PC网页的主流设备分辨率仍然为1920*1080，占总百分百为。很显然，绝大部分的屏幕分辨率都已经超过了1366*768，在适配网页时则不需要对1366宽度以下的尺寸做特殊处理。可见，1920px在目前是PC端网页设计的标准。
总结
使用设计系统是为了提供便捷，达成更好的设计目标，设计的时候需要谨慎考虑栅格的制定。
希望能够抛砖引玉，帮助大家解决在使用过程中遇到的常见问题，若有不足之处，欢迎补充。
参考文献：
栅格系统/6205330
专栏作家
南设，公众号：南设（ID：NANSHE18），人人都是产品经理专栏作家。专注设计，逻辑性强，注重体验。分享体验设计、人工智能开发等。
网页栅格如何制作 第4篇
缺乏灵活性：在小屏幕上可能会导致布局问题，如过度挤压或需要水平滚动。
用户体验限制：不能提供针对不同设备优化的布局，可能影响在移动设备上的表现。
2. 流动栅格（FluidGrid）
流动栅格系统的列宽基于屏幕尺寸的百分比而非固定像素定义。随着浏览器窗口或设备屏幕的大小调整，栅格和其中的内容也会相应地缩放和调整。
流动栅格特别适用于响应式设计，可以优化各种屏幕尺寸的用户体验，从大型显示器到智能手机。
网页栅格如何制作 第5篇
以8为步进单位，进度合适，既不显得过于琐碎，也不会因为间隔太大而显得内容分散；众多开源代码都以8的倍数作为默认设计大小；已被多次论证，8点栅格甚至已经形成了一套理论。
凡事没有绝对，如果做固定结构的网页布局，不考虑响应式网页设计，也可以自行根据实际情况以偶数作为最小单位来设计网格。
列（Column）：列是栅格的数量单位，通常设定栅格数量说的就是列的数量，比如12栅格就有12个列、24栅格就有24个列。通过设定列的内边距（padding）来定制槽（Gutter）的大小，剩余的部分称为栏。
槽（Gutter）：页面内容的间距，槽的数值越大，页面留白越多，视觉效果越松散；反之，页面越紧凑。槽通常设为定值。
栅格宽度（Container）：页面栅格系统的总宽度。
边距（Margin）：栅格外边距，与屏宽保持一定的安全距离.
行：栅格系统的横向网格，与纵向网格的列成垂直状态，列和行交叉的区域形成页面的内容区，由于目_页多采用瀑布流形式，上下滑动区域变得不受限制，随意性很高，本文忽略这一部分。
这里需要注意的是：我们把栅格的列（Column）看做是栏+槽的宽度，12栅格即是指12列。有一些文章对栏和槽的理解是下方左图的样子，而从开发角度来说，下方右图是前端理解的栅格。我们用栅格来制定页面视觉规则，同时也要理解开发怎样实现栅格，才能在工作中减少不必要的沟通误区。
建立好基础栅格之后，一块内容通常会占用几个栏和列的宽度，我们把这个区域理解为内容盒子，用于承载一个区域的内容。
以上，栅格的基础概念已经清楚了，那怎样着手给自己的项目建立栅格系统呢？
当我们开始着手做一个项目时，首先应考虑在多大的尺寸范围内做设计，也就是确定栅格区域的宽度范围。
常见的栅格系统通常被划分为12栅格或24栅格。我们需要根据自己的项目确定栅格的划分数量，划分的格子越多，承载的内容越精细。通常，在信息繁杂的后台系统常用24栅格，而一些商业网站、门户网站通常划分成12栅格。
栅格不是划分的越细越好，24栅格精细，但也容易显得琐碎，内容排布的规则太多，也就相当于没有规则。有的项目根据实际情况也会划分成16栅格、20栅格，也是可以的。
△ 槽的数值越大，页面留白越多
需要注意的是，槽的区域不可以放置内容。通常，我们会给槽设定一个定值，用来确定栏的大小。
网页栅格如何制作 第6篇
后台系统和网页不同，往往逻辑复杂、数据量大，同时需要获取、比对很多的信息。
信息以表格、表单居多，所以屏幕的宽度就显得很重要了，寸土寸金。所以通常选中全部填充的样式，舍弃两侧留白的样式。
我们选择设备比例最多1920x1080为画板。（这里主要将纵向栅格，暂不考虑浏览器自身的标签栏和菜单栏的高度）
制定如下的样式，数值仅供参考，照搬的请慎重。
手把手教你做规范--布局规范（栅格）
网页栅格如何制作 第7篇
8作为偶数，能适应市面上绝大多数的设备屏幕，兼容性较高。在响应式设计中，网格单位的选择对于适应不同的屏幕尺寸和布局非常重要。使用8作为网格单位可以更容易地调整和重新排列元素，确保在不同设备上的一致性和良好的用户体验。
在输出各种倍数图片时也可以保证图片不会出现奇数（，等像素单位的出现），手机端导出的图均为偶数（IOS导出：1倍图、2倍图、3倍图；Android导出：1倍图、倍图、2倍图、3倍图4倍图）。
开发工程师使用的前端开源组件库比如Metronic、Antdesign等开源组件库也是基于8的原子单位来设计，因此如果设计师也使用以8为基本单位的栅格系统，开发与设计师相互对接就会更加方便，还原度方面开发实现也能更高品质地去还原我们的设计。
网页栅格如何制作 第8篇
栏（Columns）是呈放内容区域。
PC端通常有12栅格或24栅格，意思就是纵向有12栏或24栏。
槽（Gutters）是两个栏中间的间距。槽的数量比栏的数量少一个。
假设是栅格宽度是W、栏的宽度是C、槽的宽度是G。有N个栏，就有N-1个槽，则可以推断出算出W=N*C+（N-1）G。
忘掉 栏+槽=列的概念（个人感觉没有作用，有不同见解的欢迎讨论。）
手把手教你做规范--布局规范（栅格）
为什么用12或24栏？
12栏和24栏都是PC端较常用的，移动端用4栏的居多，分的越细可变化的内容越丰富。但过于细也会使页面变得很碎，差异感和韵律感降低。12或24栏可以被2等分、3等分、4等分、6等分、12等分，还能按 1:2:1 、 1:3:2 、 1:2:2:1……等比例分割，提供了足够丰富的变化。
以下是京东首页的截图，应该是采用了12栅格，并且分别采用了2等分、四等分、六等分、2:6:2:2 、 2:10 。
手把手教你做规范--布局规范（栅格）
网页栅格如何制作 第9篇
（1）固定栅格
栏和槽的宽度是固定不变的，不随屏幕的大小而变化。到一定的临界值的时候栅格列数会发生变化。
假设在我们以1920的屏幕大小为画板，栅格宽度是1136，看到的如下图：
手把手教你做规范--布局规范（栅格）
在2560的屏幕下看页面，两侧的留白就会变大，中间的内容保持不变。如下图：
手把手教你做规范--布局规范（栅格）
在1024的屏幕下看页面，就会出现横向滚动条，页面仿佛被截断一样。如下图：
手把手教你做规范--布局规范（栅格）
在更小的屏幕下，栅格的列数会发生变化。但无论怎么变化，栏和槽的宽度是不变的。如下图：
手把手教你做规范--布局规范（栅格）
在临界值之间设计的布局不会改变。具体到什么临界值栅格的列数会发生变化，需要跟开发说清楚。临界值设置多少、设置多少个临界值要根据实际情况来制定。
优点：设计的还原度是最高的，无论在什么什么屏幕下，核心样式是保持不变的。
缺点：在小屏下会有滚动条。在大屏上左右留白过多，有点浪费空间。
（2）流动栅格
栏的宽度是变化的，随屏幕的大小而变化。槽的宽度固定不变。到一定的临界值的时候栅格列数会发生变化。
假设在我们以1920的屏幕大小为画板，栅格宽度是1136。看到的如下图：
手把手教你做规范--布局规范（栅格）
在2560的屏幕下看页面，槽的宽度保持不变，栏的宽度发生改变。如下图：
手把手教你做规范--布局规范（栅格）
在1024的屏幕下看页面，槽的宽度保持不变，栏的宽度发生改变。如下图：
手把手教你做规范--布局规范（栅格）
问题来了，这样一算栏的像素就不但不是偶数，而且还不是整数了，怎么办，屏幕该怎么显示呢？没关系，有的卡片可能是351个像素，有的是356个像素，这样1像素的差距在屏幕上很难看出差别来，为了在不同大小的屏幕上适配，这1像素是可以忍受的。
需要把子元素内的布局样式，那些是可以变动的地方跟前端说明即可。（例如：当连变化时，卡片内的图标保持左对齐，左边距不变。文字左对齐，每行的文字数量自适应。）
优点：在不同屏幕下会自动放大或缩小，更充分的利用空间。
缺点：由于栏宽是不固定的，样式可能会发生变形。文字可能会变成多行或者超长的一行。
（3）混合栅格
在同一页面中可以分成多个区域，每个区域做不同栅格类型。
手把手教你做规范--布局规范（栅格）
网页栅格如何制作 第10篇
栅格宽度是需要栅格设计区域的宽度，不是显示器宽度。
手把手教你做规范--布局规范（栅格）
手把手教你做规范--布局规范（栅格）
举例：假设我们以1920px的屏幕为画板作图、使用24列栅格。设定栏的宽度为32px4（个原子单位），槽的宽度为16px（2个原子单位）。
则栅格宽度W=24列 x 32栏宽 + 23 列x 16槽宽=1136px，其余宽度做自适应处理。
在1920屏宽下如下图所示：
手把手教你做规范--布局规范（栅格）
应用原则：
网页栅格如何制作 第11篇
（1）大/小屏幕响应
当屏幕变大时，左侧蓝色菜单栏保持宽度不变（固定栅格）。右侧栅格区域的槽保持不变，栏等比例扩大。（流动栅格）
当屏幕变小时，左侧蓝色菜单栏保持宽度不变（固定栅格）。右侧栅格区域的槽保持不变，栏等比例缩小。（流动栅格）
手把手教你做规范--布局规范（栅格）
（2）平板响应
当屏幕小到平板的尺寸时候，栅格区的内容就无法正常显示了，十分影响体验。于是就是改变栅格的数量，变成6列栅格，同时菜单栏收缩简要模式，这样就完成了平板端的适配。
手把手教你做规范--布局规范（栅格）
（3）手机响应
手把手教你做规范--布局规范（栅格）