网页设计的栅格化设计 第1篇
以8为步进单位，进度合适，既不显得过于琐碎，也不会因为间隔太大而显得内容分散；众多开源代码都以8的倍数作为默认设计大小；已被多次论证，8点栅格甚至已经形成了一套理论。
凡事没有绝对，如果做固定结构的网页布局，不考虑响应式网页设计，也可以自行根据实际情况以偶数作为最小单位来设计网格。
为什么强烈推荐「8点栅格」→ 《让设计更高效！正式为大家安利这个好用的「8点栅格」》
网页设计的栅格化设计 第2篇
1）Material Design
Material Design的栅格布局是一种响应式设计系统，旨在确保用户界面在不同设备和屏幕尺寸上的一致性和灵活性。它主要基于12列的栅格系统，允许设计师和开发者在布局中有效地组织内容。
Material Design的栅格布局是响应式的，能够根据设备的屏幕大小和方向自动调整。设计师可以利用五个断点（xs, sm, md, lg, xl）来定义在不同屏幕尺寸下的列数和布局方式，从而实现灵活的设计。
2）智能化响应式设计
利用栅格系统可以构建优秀的智能响应式设计，使得网页在不同设备上保持一致性和组织性。通过合理的布局和元素对齐，设计师能够提升用户体验和界面美观性。
在上图这个案例中，设计师利用栅格系统完成网页（Web）设计后，可以轻松地借助栅格的特性和“摹客DT”中的自动布局能力，自动得到平板（Tablet）端和手机（Mobile）端的设计效果，极大地提升设计效率。
3）8点网格设计
8 点网格系统是设计界常用的标准，适用于各种屏幕尺寸。设计师通过使用 8 的倍数来定义元素的间距和尺寸，确保在不同设备上实现视觉一致性。这种方法特别适合移动端设计，能够提高布局的效率和准确性。
在上图的案例中，设计师尽可能使用 8 的倍数来定义所有的设计参数，包括按钮的长宽尺寸、按钮的内边距（Download距离按钮顶部的内边距）、按钮和按钮的间距等。8 点网格可以进一步降低设计师的决策难度，提升设计效率。
4）Bootstrap栅格系统
Bootstrap 框架提供了一个强大的栅格系统，支持多种屏幕设备的响应式设计。通过预定义的类，开发者可以快速构建布局，确保在不同设备上的良好表现。
而在 Bootstrap 3 中，整个栅格系统一开始就是对移动设备友好的，整个框架的内核中内置了整套栅格机制的支持。也就是说，使用 Bootstrap 可以获得最佳的移动端栅格效果。
5）文字基线网格系统
基线网格系统通过密集的水平行提供文本对齐和间距准则，确保文本在设计中的一致性。这种方法在排版设计中尤为重要，能够提升阅读体验和视觉美感。
在上方的示例中，每8px行在红色和白色之间交替。将文字的所有行高设置为基本单位（8x或4px）的倍数，可以让文本和基线网格完美对齐。
6）B端用户界面（GUI）设计
在B端界面设计中，栅格系统用于布局和对齐界面元素，确保用户界面的整洁和可用性。设计师可以利用栅格系统来创建直观的导航和交互体验，提升用户满意度。由于B端界面中通常有固定的左侧边栏，此时可以利用混合栅格的策略，让界面中仅内容的部分符合栅格要求，固定的左边栏不参与栅格布局。
在上方的示例中，登录界面和B端的左侧功能页面都是固定的内容，无需参与栅格布局。此时，可以将布局的重点集中在内容区域，形成混合栅格的结构，保证最佳的页面响应体验。
7）Ant Design
作为国内流行前端设计框架，Ant Design在栅格上的定义也是非常经典的。Ant Design 采用 24 栅格体系。以上下布局的结构为例，对内容区域进行 24 栅格的划分设置，如下图所示。页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中视角的不同就容易造成偏差，最终影响还原度，继而增加沟通成本。
8）Arco Design
Arco Design的栅格布局是一种灵活且高效的设计系统，主要用于字节跳动的中后台产品。其设计理念基于24栅格系统，能够有效地组织和展示信息，确保页面布局的一致性和逻辑性。
Arco Design的这套栅格布局不仅提升了设计的效率和美观度，还通过模块化和响应式设计增强了产品的适应性。设计师和开发者可以通过这一系统更好地协作，实现高质量的产品设计。
在这篇文章中，我们深入探讨了栅格系统的基本概念、搭建方法以及实际应用案例。通过这8个应用案例，我们不仅展示了栅格系统在设计和布局中的重要性，还揭示了如何在真实设计和开发中去使用栅格系统，并提升工作效率和视觉美感。
实践出真知，栅格系统的灵活性和适应性使其成为设计师和开发者不可或缺的工具。无论是在网页设计、平面设计，还是在产品开发中，掌握栅格系统都将为你的工作提供坚实基础。通过本篇文章，相信你已经更深入地理解了栅格系统的价值，愿你在项目中大胆应用这些知识，将知识转化为项目成果，在实战中去体会栅格系统的独特优势吧！
网页设计的栅格化设计 第3篇
栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。通常，在网页设计中经常使用8作为栅格的最小步进单位，一些知名公司都以8为最小单位划分网格，规范页面秩序，比如：Ant Design、Matierial Design等。
这样做的好处有两方面。
偶数思维：以8为基础倍数，元素大小可以被大多数浏览器识别并整除，最大程度避免出现半像素的情况。
规律性：所有元素以8像素为步进单位，元素大小、间距有规律可循。
网页设计的栅格化设计 第4篇
固定栅格示意
如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在900px的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。但当达到768px临界点时，设计马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。
流动网格的示例
现在来看看流动网格的特点，当窗口缩小时，内容将动态的发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。
所以我想说的是，设计的临界值只是一个更改布局的参考点。这就是为什么列宽和槽在网格中不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。
3. 混合网格
在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。
一些做的很酷的栅格系统
不需要太死板地去坚持传统栅格套路，12、8、4这样的分布，甚至不需要20px的水槽，下面是一些在设计中使用栅格系统做的很棒的设计灵感。
Dropbox Design
使用网格的方式取决于你自己。你可以在主要内容部分使用网格，次要内容则不使用。在Wordpress的例子中，页面中间的部分使用栅格化设计，左侧的侧边栏则没有使用。
The Mockup Club
我非常确定的说，Instagram的PC端是用上了6列栅格布局。
最后，写这篇文章的目的是想提供一些关于如何在响应式设计中使用栅格系统，半人马花了很多年的时间写了大量的网页前端代码来理解栅格系统是如何工作的。学习了很多技术类书籍和教程，我知道很多人都在关注它为什么重要，却不知道其所以然和如何去使用它。
你要做的最好的事情就是从现在开始注意那些优秀设计是如何对齐元素的，如果是网页设计师或者UI设计师，半人马的建议是你最好学习一下基本的前端代码比如html和css,你将会开始看到这些网格是如何工作的。这对于你的专业是具有很大的帮助的。不再盲目限定于设计软件如photoshop给你的画布大小，而茫然，然后在群里问我该设计多大的块？哈哈
希望这篇文章对大家有帮助。
文章中的图片来源于网络，如有侵权请联系我删除！返回搜狐，查看更多
网页设计的栅格化设计 第5篇
有些时候，你想要将设计和卡片分成两部分，一半是图片，一半是文字。你可能遇到这样尴尬的情况，图片没有完全落在一列上，文字被迫以一种奇怪的方式自适应。其实不用担心，只要「父」容器对齐栅格，这就没有关系。
父子级内容栅格排版示意
4. 除非有意，否则不要把列作为外部填充
所有重要内容都应该与栅格列宽相适应。一开始会觉得奇怪，因为如果不习惯使用网格，可能会把网格宽度当成全部内容区域，所以还需要给它设定一定的内边距。此时外边距就起到了留白的作用，它们充当了内边距。不要在网格内部利用列宽当成内边距，而是要与网格最外面保持对齐，利用网格外的间距来当做留白区域。
根据代码实现方式，要么网格内的内容按比例缩放，边距固定，要么外边距与内容同时缩放。
正确的内容填充方式和不正确的把栅格当做边距
所以如果有人说「我需要一个1200px宽的设计」，这并不意味着你的设计就是1200px宽，这其实是说设计内容宽度在1200px的画布内，实际内容占位是960px，这样就会有空间留出外边距。
5. 完全出血的元素或纹理图形应该设计在画板边缘，并理解为出血的列网格
这个页面布局的顶部图片被设计成完全出血
这是一个例外的规则，当背景颜色或者图片在完全出血的情况下，开发同学会把它理解为一个全屏的内容元素。
果设计的是装饰元素之类的内容，可以接受它被裁切掉，此时也可以脱离栅格化的设计。
一些图片和文字的出血设计
页眉和页脚有时也有例外，它们不被认为是内容的一部分。有些设计将它们固定在浏览器边缘，有些则喜欢保持内容的宽度，这取决于自身功能和内容的情况。将它们保持在内容宽度内的好处是，当用户在宽屏显示器上看页面时，不需要来回扫视，将它们固定在浏览器上的好处是可以为导航元素提供更多的空间。
栅格化布局如何做到响应式
在传统的栅格化系统设计中，列的宽度和水槽的宽度是保持不变的，只是列的「数量」发生变化。
为什么要这么处理呢？这是为了让设计更简单。如果一组三张卡片分别放在桌面的四列上，那么在平板电脑上，会显示两张卡片，并把第三张卡片进行折行显示在第二行上。不需要做任何的调整，因为已经知道它位于第四列上了。
在手机上，答案也很简单，只需要一张卡片，其他的就会自动堆到下面的行中。如果你愿意，也可以变得有创意，选择只在手机上显示一张卡片，或者做一个水平滚动。这些列的自适应对于代码来说就是很简单的参考。
实际上，web必须呈现任何浏览器的宽度。例如，有一个大显示器，它可以看到1600像素宽的东西，实际上pc端的网页设计是1200px宽，平板电脑上是768px宽，手机是360px宽。所以你会看到一个小于1200px的设计，有大量的留白。但是当你的浏览器再小一个像素，1199px，会发生什么呢？
网页设计的栅格化设计 第6篇
目前市面上主流的界面设计工具都支持栅格功能，我用的是摹客DT，搭建栅格系统的步骤如下：
打开摹客DT（），使用快捷键 A 添加初始容器，并选择合适的尺寸。
在右侧属性面板中，找到并展开“布局网格”模块，激活“显示布局”选项即可打开栅格功能。设置面板中“间距”即水槽值，在类型中可以按需选择拉伸（列宽自动）还是居中（手动设定列宽）。
网页设计的栅格化设计 第7篇
栅格系统是一种将页面划分为多个列和行的布局结构，能显著提升视觉一致性和组织性。它的主要好处是：
提高可读性：通过合理的布局，用户可以更容易地浏览和理解内容。
简化设计过程：减少设计决策的复杂性，提升设计师排版效率。
便于开发对接：栅格系统符合现代前端开发人员的编程习惯，更容易实现合理的响应式布局
在数字设计中的“栅格”相比平面设计的“网格”更灵活一些，常常只制定纵向的分割规则。因为数字界面的高度不像纸张等实体媒介，不需要严格确定纵向高度。
下图中就是最常见的一个数字界面栅格结构，包括：
列（Column）
水槽（Gutter）
边距（Margin）
栅格总宽（Container）
容器盒子（Col-n）
在实际使用时，尽量让内容（容器盒子）在横向占满（N）列和（N-1）列水槽。比如上图中的左侧的容器盒子占据了 2 列和 1 列水槽，右侧的容器盒子占据了 3 列和 2 列水槽。注意，尽量不要让列和水槽数量相等，而是要让水槽数量比列少一个，这样可以让内容之间留出更自然的间隙。
网页设计的栅格化设计 第8篇
很多时候自己做的设计越细小的地方越没有办法解释它为何这么做，不能有理有据的阐述自己的设计。但是商业设计是逻辑性解决问题的设计方式，通过栅格化的使用，这些界面中的尺寸细节问题就能完美的解释了。
⑥ 便捷性
设计师除了本身的视觉设计工作外，还需要跟进对接开发，对是否可落地、实现方式、实现的规范性，复用性的高低、性价比是否合适，这些问题都是现实存在的，而栅格化设计方式可以间接的推动和解决这些问题。
⑦ 条理性
设计师可以利用栅格让界面更加有条理性，让内容可读性变高，快速校准元素在界面内的位置，让界面更加稳定平衡，让版面更加有层次感、模块化的管理元素。
Pixso总结：栅格系统有助于我们让更好的去设计，但规范总归是规范，在设计中可灵活变通，不可死搬硬套。Pixso建议，在设计中可能运用的不只是一个单独的知识点，也许是很多知识点交叉并用然后得出的更加科学合理的页面。
对于新手UI设计师来说，要想做出优秀的设计，还需要多借鉴一些优秀的栅格网页设计案例。你可以打开Pixso社区资源，里面有海量优秀的栅格化网页设计案例可免费下载使用。赶快打开Pixso开启你网页设计吧！
网页设计的栅格化设计 第9篇
常见的栅格系统通常被划分为12栅格或24栅格。我们需要根据自己的项目确定栅格的划分数量，划分的格子越多，承载的内容越精细。通常，在信息繁杂的后台系统常用24栅格，而一些商业网站、门户网站通常划分成12栅格。
栅格不是划分的越细越好，24栅格精细，但也容易显得琐碎，内容排布的规则太多，也就相当于没有规则。有的项目根据实际情况也会划分成16栅格、20栅格，也是可以的。
△ 槽的数值越大，页面留白越多
需要注意的是，槽的区域不可以放置内容。通常，我们会给槽设定一个定值，用来确定栏的大小。
我们假设内容区宽度为W（Weight），列宽为C（Column），列数为n，槽为定宽G，可以得出：W=C*n。由于槽不可以放置内容，可见内容区为：W=C*n-G。
举例：我们为一个屏宽1440的项目划分栅格，首先确定内容区宽度为1440，24列，槽为定值16；那么可以得出列宽60，栏为48。
内容区应从水槽开始到水槽结束：
目前，很多软件提供自动栅格设置功能，sketch也提供这样的功能：Layout Settings。