可以追溯到古希腊和古罗马期间的建筑设计中。在建筑设计中，栅格是一种用于方案和布局建筑物的构造性元素。
在古希腊和古罗马的建筑设计中，建筑师们利用栅格来将建筑物的平面图分割成等宽的列和行，以便更好地组织和支配建筑物的各个部分。通过将平面图分割成栅格，建筑师可以更随意马虎地方案建筑物的构造、空间和功能，使得建筑物更具有组织性和美学感。
随着韶光的推移，栅格的观点逐渐扩展到了其他领域，包括艺术、设计和排版等。在艺术和设计领域，栅格被用来方案和布局绘画、雕塑和其他艺术作品。在排版领域，栅格被用来将页面分割成等宽的列和行，以便更好地组织和排列笔墨、图像和其他元素。
在20世纪初期，栅格成为了平面设计领域的主要观点之一。设计师们开始利用栅格来方案和布局平面设计作品，包括海报、杂志和书本等。通过将设计作品分割成栅格，设计师可以更好地组织和排列设计元素，使得设计作品更具有构造性和视觉吸引力。
20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣扬，将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响天下各国，因此也被称为“瑞士平面设计风格”（SwissDesign）。由于这种风格大略明确，传达功能准确，因而很快得到天下范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最盛行的风格，因此又被称为“国际主义平面设计风格”（InternationalTypographicStyle）。
本日，栅格已经成为了网页设计和移动运用设计中的主要观点之一。网页设计师和运用设计师们利用栅格来方案和布局网页和运用界面，以确保它们在不同设备上能够呈现出良好的外不雅观和用户体验。
二、什么是栅格
1、建筑学中的栅格：在建筑设计中，栅格常日指的是将建筑物的平面图分割成等宽的列和行的构造。这种划分有助于建筑师方案建筑物的构造、空间和功能，使其更具组织性和美学感。
2、平面设计中的栅格：在平面设计领域，栅格是指将平面图、海报或其他设计作品的布局分割成等宽的列和行的系统。这种布局系统有助于设计师更好地组织和排列设计元素，使作品更具构造性和视觉吸引力。
3、网页设计中的栅格：在网页设计中，栅格常日指的是将网页分割成等宽的列和行的布局系统。这种布局系统有助于设计师构建相应式网页，确保网页在不同设备上呈现出良好的布局和用户体验。
电子设备中的栅格：在电子设备的显示器上，像素阵列常日被称为栅格。栅格决定了显示器上的图像和文本的分辨率和清晰度。
三、为什么要学习栅格系统
1. 用户层面（Attheuserlevel）增强视觉同等性，栅格系统通过规范元素的排列位置和间距，确保页面上各个部分在视觉上的同等性。这种同等性可以帮助用户更好地理解信息，减少了视觉混乱，使设计更加简洁和专业。
栅格有助于创建清晰、有逻辑的布局，易于阅读和导航。在网页设计中，栅格系统确保文本、图片和其他元素以易于消化的办法呈现，从而提高用户体验。
2. 团队层面（Attheteamlevel）
当设计团队利用统一的栅格系统时，团队成员之间的沟通更加顺畅。这种视觉措辞让团队可以更有效地共同事情，减少误解和重复劳动。
设计师可以利用定义的栅格模板快速布局，这大大提高了事情效率。栅格系统简化了决策过程，因此设计师不必每次都重新考虑元素的位置和尺寸。
为设计供应了一个坚实的根本，使得未来的扩展和修正变得更加随意马虎和同等。设计师可以在现有栅格的根本上添加新的元素或调度布局，而不会毁坏整体设计的和谐性。
虽然栅格供应了规则，但它也可以引发设计师的创造力。设计师可以在这些规则内探索不同的布局和设计元素组合，从而创造出独特和创新的设计方案。
3. 运用层面（Applicationlevel）
利用栅格可以更随意马虎地将文本、图像、视频和其他媒体类型领悟在一个折衷的布局中。栅格为不同类型的内容供应了自然的“容器”，有助于创建动态和互动性较高的用户界面。
栅格系统使设计能够更随意马虎地适应不同的屏幕尺寸和分辨率。在相应式设计中，栅格可以根据设备屏幕的大小自动调度，保持内容的可访问性和都雅性。
四、栅格分类有几种呢？
在界面和网页设计中，栅格系统是用于创建有序、对齐和视觉上同等的布局的一个工具。栅格系统可以被分为三种紧张类型：固定栅格、流动栅格和稠浊栅格。每种类型都有其特定的运用处景和特性。
1. 固定栅格（FixedGrid）
固定栅格系统由具有固定像素宽度的列组成。这意味着无论用户的屏幕尺寸或分辨率如何变革，栅格的尺寸和布局保持不变。
固定栅格常日适用于须要确保设计在所有设备上看起来完备同等的环境，或者在设计师知道大多数用户将利用相同类型设备（如特定型号的显示器）的情形下。
优点：
同等性：在所有屏幕上供应同等的布局和体验，由于栅格尺寸固定不变。
大略易用：设计和开拓更大略，由于栅格系统不须要调度以适应不同屏幕尺寸。
缺陷：
缺少灵巧性：在小屏幕上可能会导致布局问题，如过度挤压或须要水平滚动。
用户体验限定：不能供应针对不同设备优化的布局，可能影响在移动设备上的表现。
2. 流动栅格（FluidGrid）
流动栅格系统的列宽基于屏幕尺寸的百分比而非固定像素定义。随着浏览器窗口或设备屏幕的大小调度，栅格和个中的内容也会相应地缩放和调度。
流动栅格特殊适用于相应式设计，可以优化各种屏幕尺寸的用户体验，从大型显示器到智好手机。
优点：
相应性强：栅格自动调度以适应不同的屏幕宽度，无需额外的设计或编码事情。
用户体验优化：在不同设备上能够供应更优的阅读和浏览体验。
缺陷：
设计繁芜性：设计师须要考虑如何在不同的屏幕尺寸上保持内容的可视性和都雅性。
可能的布局问题：如果不恰当地利用百分比，可能导致某些屏幕尺寸下的布局失落衡。
3. 稠浊栅格（HybridGrid）
稠浊栅格系统结合了固定栅格和流动栅格的特点。在某些情形下，它利用固定宽度的列；在其他情形下，利用基于百分比的宽度。这种灵巧性许可设计师根据内容和功能需求优化每个元素的布局。
稠浊栅格非常适宜须要同时保持一定设计同等性和相应多种屏幕尺寸需求的繁芜项目。
优点：
灵巧性和掌握性：设计师可以根据须要在固定和流动布局之间做选择，以达到最佳的设计效果。
适应性强：能够更好地适应中等尺寸的屏幕，如平板电脑，同时在大屏和小屏上保持布局的合理性。
缺陷：
实现难度高：须要更多的设计和编码考虑，以确保所有元素在不同情形下都表现良好。
可能的性能问题：稠浊利用固定和流动单位可能导致某些设备上的性能问题或显示不一致。
五、构成栅格系统根本要素有哪些呢？
常见的栅格紧张有6个根本元素组成，分别是网格、列、水槽、边距、栅格总宽、容器盒子，下面我们详细理解这6格根本元素。
栅格的打算公式：栅格总宽=列宽N+水槽（N-1）+边距2
1. 网格（Grid）
网格（Grid）是构成页面栅格系统的最小单位，也常常会被成为最小单元格，是界面中的根本单位，所有界面元素豆按照这个根本单位进行分布和布局，由多个格子有规律的组成网，形成网格。常日设计时常用的单元格最小单位为8
为什么是8，不可是其他数字呢，你肯定会有这样的迷惑，别急向下看：
a.适应性和相应性较高
8作为偶数，能适应市情上绝大多数的设备屏幕，兼容性较高。在相应式设计中，网格单位的选择对付适应不同的屏幕尺寸和布局非常主要。利用8作为网格单位可以更随意马虎地调度和重新排列元素，确保在不同设备上的同等性和良好的用户体验。
在输出各种倍数图片时也可以担保图片不会涌现奇数（1.5，1.75等像素单位的涌现），手机端导出的图均为偶数（IOS导出：1倍图、2倍图、3倍图；Android导出：1倍图、1.5倍图、2倍图、3倍图4倍图）。
开拓工程师利用的前端开源组件库比如Metronic、Antdesign等开源组件库也是基于8的原子单位来设计，因此如果设计师也利用以8为基本单位的栅格系统，开拓与设计师相互对接就会更加方便，还原度方面开拓实现也能更高品质地去还原我们的设计。
b.灵巧性
8作为一个相对较小的数字，可以轻松地进行倍数缩放。如果须要更细致的网格，可以将8的倍数相加或减去以创建更小的间距或更繁芜的布局。
8可以被2、4和8整除，这使得布局和元素的对齐更加方便。它许可将屏幕或页面分割为相等的部分，简化了设计中的布局过程。
c.同等性
利用相同的网格单位可以保持设计的同等性和可预测性。元素在网格上对齐可以让设计看起来更整洁、统一，并且在不同屏幕尺寸或设备上保持同等性。
温馨提示：网格单位的选择可以根据详细的设计需求和项目详细哀求而有所不同。有些项目可能会选择其他的网格单位，如12或16，以知足特定的设计哀求。主要的是在设计过程中选择一个同等的网格单位，并在全体设计中保持对齐和同等性。
2. 列（Column）
列（Column）常日指的是栅格数量，
如12栅格就有12个列、24栅格就有24个列等。这些列数是根据设计的需求和布局的繁芜性来确定的。较少的列数可以供应更大略的布局，而较多的列数则可以供应更灵巧和繁芜的布局。
3. 水槽（Gutter）
水槽（Gutter）是指列与列之间的间距。
水槽可以帮助提高布局的可读性。可以避免元素之间过于拥挤，使内容更易于阅读和理解。水槽还可以在不同列的视觉之间供应足够的空间，使内容更加突出。水槽的宽度可以根据设计的须要进行调度。在一些栅格系统中，水槽的宽度可能是固定的，而在其他系统中，可以根据个人的需求进行自定义。这使得栅格系统在布局设计中更加灵巧和可扩展。
4. 边距（Margin）
边距（Margin）是指列与容器边界或其他元素之间的空缺区域。
边距在相应式布局中具有主要浸染。通过在不同屏幕尺寸下调度边距的大小，可以改变元素之间的间距和布局。这使得栅格系统能够适应不同设备和视口尺寸，供应更好的用户体验。
边距也可以用于创建特定的可视效果。通过调度边距的大小和位置，可以在布局中实现不同的空缺区域和空间感。边距的利用可以改变元素之间的相对位置和比例，从而影响整体设计的外不雅观和觉得。
5. 栅格总宽（Container）
栅格总宽（Container）=所有列+所有水槽+两侧边距，这便是全体栅格系统的总宽度。
栅格总宽可以根据设计需求进行调度和扩展。如果须要更大的布局空间，可以增加栅格总宽度，以容纳更多的列或更宽的元素。反之，如果须要较小的布局空间，可以减小栅格总宽度，以创建更紧凑的布局。
6. 容器盒子（Col-n）
容器盒子（Col-n）是指包含了栅格布局的最外层元素或容器，容器内的元素可以不用必须沿用栅格布局，会将笔墨、图片、视频、按钮等元素约束在限定的容器盒子内形成可以复用的设计组件。容器盒子的宽度会根据设计需求的不同来进行定义内容须要占多少列形成容器盒子。
六、如何建立栅格系统1. 常见的布局样式
在设计web端界面时，我们须要拆分业务选择对应适宜的布局样式分别是：顶部导航布局、左侧导航布局、T型导航布局。
a.顶部导航布局
顶部导航布局常日利用比较多的是企业类官网。
优点：
导航易于访问：将导航放置在页面顶部可以利用户更随意马虎找到并访问导航菜单，供应直不雅观的导航体验。
垂直空间利用高：高下布局霸占较少的垂直空间，使得页面内容能够更多地展示在用户视野范围内。
适应性强：顶部导航高下布局在不同屏幕尺寸和设备上适应性较好，特殊适宜移动设备浏览。
缺陷：
导航限定：由于导航位于页面顶部，导航菜单的可见区域有限，可能对具有大量导航选项的网站造成限定。
内容展示受限：顶部导航高下布局可能会限定页面中紧张内容的展示空间，特殊是在较小的屏幕上。
b.左侧导航布局
左侧导航布局常日利用比较多的是后台管理系统。
优点：
导航信息集中：将导航放置在页面左侧可以使导航菜单集中展示，供应清晰的导航构造和导航路径。
多层级导航：左侧导航旁边布局适宜多层级导航构造，可以有效组织和展示多个导航层级。
适应性较强：左侧导航旁边布局对付宽屏幕显示器和横向滚动的设备有良好的适应性。
缺陷：
水平空间利用低：左侧导航旁边布局霸占较多的水平空间，可能会限定页面内容的展示范围。
对小屏幕不友好：在较小的屏幕上，左侧导航旁边布局可能会导致内容被压缩或须要水平滚动，影响用户体验。
c.T型导航布局
T型导航布局一些繁芜类型的企业网站或繁芜的SaaS系统会利用。
优点：
强调紧张内容：T型导航布局将紧张内容放置在顶部，使其在页面中更加突出和易于访问。
导航与内容结合：T型导航布局将次要的或次级的导航放置在紧张内容的侧边或底部，利用户可以根据自己的需求选择性地查看详细信息。
供应导航和赞助功能：T型导航布局常日在顶部供应导航菜单、搜索栏等赞助功能，方便用户进行导航和操作。
缺陷：
空间利用相对较低：T型导航布局在页面上占用较多的垂直和水平空间，因此对付较小的屏幕可能无法展示全部内容。
相应式设计寻衅：T型导航布局须要在不同屏幕尺寸和设备上进行相应式设计，以保持得当的布局和舒适的用户体验。
须要根据详细的设计需求、目标用户和设备高下文来选择适宜的布局办法。在实际设计中，可以结合上述布局办法的优点，并充分考虑相应式设计的哀求，以供应良好的用户体验。
2. 选择栅格的列数
我们在做栅格系统的时候可以利用http://grid.guide/在这个网站你可以根据不同宽度的网页来制订你要的列宽和间距，这便是栅格系统，一个网页版的田字格，可以根据不同的网页风格调度内容宽度，产生不同间距和不同列宽。常见的栅格有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网页的主流设备分辨率仍旧为19201080，占总百分百为42.94%。很显然，绝大部分的屏幕分辨率都已经超过了1366768，在适配网页时则不须要对1366宽度以下的尺寸做分外处理。可见，1920px在目前是PC端网页设计的标准。
总结
利用设计系统是为了供应便捷，达成更好的设计目标，设计的时候须要谨慎考虑栅格的制订。
希望能够抛砖引玉，帮助大家办理在利用过程中碰着的常见问题，若有不敷之处，欢迎补充。
参考文献：
https://baike.baidu.com/item/栅格系统/6205330
https://zh.wikipedia.org/wiki/%E6%A0%85%E6%A0%BC%E8%AE%BE%E8%AE%A1
https://webflow.com/blog/history-of-grids
https://designcollection.medium.com/the-advantages-of-the-bootstrap-grid-system-ce342d314dcc
https://medium.com/@gdwn/how-i-use-the-8-point-grid-system-2ea6eec8deb4
专栏作家
南设，"大众号：南设（ID：NANSHE18），大家都是产品经理专栏作家。专注设计，逻辑性强，看重体验。分享体验设计、人工智能开拓等。
本文原创发布于大家都是产品经理，未经容许，禁止转载。
题图来自 Unsplash，基于 CC0 协议
该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。