pc端网页设计栅格化 第1篇
有些时候，你想要将设计和卡片分成两部分，一半是图片，一半是文字。你可能遇到这样尴尬的情况，图片没有完全落在一列上，文字被迫以一种奇怪的方式自适应。其实不用担心，只要「父」容器对齐栅格，这就没有关系。
父子级内容栅格排版示意
4. 除非有意，否则不要把列作为外部填充
所有重要内容都应该与栅格列宽相适应。一开始会觉得奇怪，因为如果不习惯使用网格，可能会把网格宽度当成全部内容区域，所以还需要给它设定一定的内边距。此时外边距就起到了留白的作用，它们充当了内边距。不要在网格内部利用列宽当成内边距，而是要与网格最外面保持对齐，利用网格外的间距来当做留白区域。
根据代码实现方式，要么网格内的内容按比例缩放，边距固定，要么外边距与内容同时缩放。
正确的内容填充方式和不正确的把栅格当做边距
所以如果有人说「我需要一个1200px宽的设计」，这并不意味着你的设计就是1200px宽，这其实是说设计内容宽度在1200px的画布内，实际内容占位是960px，这样就会有空间留出外边距。
5. 完全出血的元素或纹理图形应该设计在画板边缘，并理解为出血的列网格
这个页面布局的顶部图片被设计成完全出血
这是一个例外的规则，当背景颜色或者图片在完全出血的情况下，开发同学会把它理解为一个全屏的内容元素。
果设计的是装饰元素之类的内容，可以接受它被裁切掉，此时也可以脱离栅格化的设计。
一些图片和文字的出血设计
页眉和页脚有时也有例外，它们不被认为是内容的一部分。有些设计将它们固定在浏览器边缘，有些则喜欢保持内容的宽度，这取决于自身功能和内容的情况。将它们保持在内容宽度内的好处是，当用户在宽屏显示器上看页面时，不需要来回扫视，将它们固定在浏览器上的好处是可以为导航元素提供更多的空间。
栅格化布局如何做到响应式
在传统的栅格化系统设计中，列的宽度和水槽的宽度是保持不变的，只是列的「数量」发生变化。
为什么要这么处理呢？这是为了让设计更简单。如果一组三张卡片分别放在桌面的四列上，那么在平板电脑上，会显示两张卡片，并把第三张卡片进行折行显示在第二行上。不需要做任何的调整，因为已经知道它位于第四列上了。
在手机上，答案也很简单，只需要一张卡片，其他的就会自动堆到下面的行中。如果你愿意，也可以变得有创意，选择只在手机上显示一张卡片，或者做一个水平滚动。这些列的自适应对于代码来说就是很简单的参考。
实际上，web必须呈现任何浏览器的宽度。例如，有一个大显示器，它可以看到1600像素宽的东西，实际上pc端的网页设计是1200px宽，平板电脑上是768px宽，手机是360px宽。所以你会看到一个小于1200px的设计，有大量的留白。但是当你的浏览器再小一个像素，1199px，会发生什么呢？
pc端网页设计栅格化 第2篇
方式二
因为：列数+间隙为A
也可得(A×n)-i=W
AI操作方法
1.比如950PX为类，模拟浏览器背景1920，新建主要区域950px；
2.选中950矩形，进行对象—路径—分割为网格
3.输入总宽，列宽就可以自动帮你计算了
通过AI也可以做个简单的栅格系统，可以尝试一下！
二、主流网站如何使用栅格系统
电商网站
看一下两个主流电商如何使用栅格布局页面，进一步加深对栅格系统使用的了解。
（左 淘宝 & 右 京东）
淘宝布局
下图包含：
第一张图为完整内容展示布局
第二张为浏览器缩小时内容展示布局
淘宝布局分为4列内容：1、2、3、4，第二张缩小后，内容3则被隐藏。
栅格布局：
第一张图完整内容展示布局：网页总宽度为1200，列数为24，水槽为10；
第二张图浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10。
在第二张图栅格布局里，隐藏4列，内容2宽度变窄占10列，其他内容不变。
栅格布局设定后，可以很方便计算出每个模块内容的宽度
栅格的列数，根据具体内容设定。内容模块较多，建议等分列数多一些，容易布局；如果内容模块较少，等分列数也可以少一些，就像淘宝可以等分成24列，也可以等分成12列。
栅格布局设定为12列，每个模块内容的宽度和上面等分成24列的宽一样
京东布局
下图包含：
第一张图为完整内容展示布局
第二张图浏览器缩小时内容展示布局
京东布局和淘宝布局一样分为4列内容：1、2、3、4，在被缩小的情况下，内容3被隐藏。
栅格布局：
第一张完整内容展示布局：网页总宽度为1200，列数为24，水槽为10；
第二张浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10。
在被缩小的图二的栅格布局里，隐藏4列，其他内容不变。
京东栅格布局，每个模块内容的宽度如下图
再来强调一下：栅格的列数，根据具体内容设定。京东网页等分成24列，也可以等分成12列。
栅格布局设定为12列，每个模块内容的宽度和上面等分成24列的宽一样
三、如何用栅格系统布局页面
第一步：确定页面宽度，比如1920、1800、1600、1366、1280等等
第二步：分析内容等分的复杂度，如果内容简单只需要3、4等分，12列的栅格系统即可。如果有较多不等分的可能，还是建议采用24列的栅格系统，可灵活设置。
第三步：根据内容布局页面，确定模块之间是否有“间隔”，间隔尺寸是多少，6px、8px、10px、12px、20px选一个方便计算、方便记忆和整除的数值即可。就像过去，开发人员发现960px是最适合作为网格布局的宽度，因为960可以整除3，4，5，6，8，10，12，15，是不是突然发现设计其实是一道数学题。
网页举例
根据具体内容，使用方格布局整个页面。
Sketch栅格设置，这里的总宽度1190是内容设计的实际宽度，设计页面宽度是1920，因为有些内容展示选用居中布局方式，两边留白。
四、影响网页设计的两大因素
分辨率和浏览器
什么是分辨率？
比如1920*1080px，整个屏幕可以看成是由很多小方格子组成，一个像素就是一个小格子，横向有1920个小格子，竖向有1080个小格子。
电脑屏幕是14寸还是15寸的，尺寸不变，电脑分辨率是可变的，在同一个屏幕上，分辨率越大画面就越精细，反之就越模糊。当下比较流行的屏幕分辨率：1024*768、1366*768、1280*800、1280*1024、1440*900、1600*900、1920*1080等。
注意：
关于分辨率，可以选用适合自己团队的分辨率尺寸，我们团队是梳理出所有产品的分辨率的使用情况，及团队产品设计的特点，选取2-3个作为后续统一使用的尺寸。
浏览器
设计网页时要考虑好浏览器，主流的浏览器有谷歌、Safari、火狐、IE、欧朋等。
因为不同浏览器工具栏高度不同，如果设计内容需要在小屏幕上展示，就要考虑到打开浏览器默认页面及全屏页面的高度展示情况，如果浏览器所占高度较多，那么内容展示区域就被压缩了，所以就要考虑将最重要的内容尽量放在上面。
下面来看看最近一年浏览器市场份额占比情况。
五、GridGuide工具介绍
网址：http://ide/
GridGuide介绍
首先来认识下「GridGuide」她是帮你在设计里创建完美栅格的一个工具。（用她而不是它，是因为GG如果是个人，应该是个聪慧伶俐的大美人吧~）
使用方式：输入3个数值，自动生成所有可使用的栅格最佳组合方案。打开网页，她长这样
网页包含4大版块内容
pc端网页设计栅格化 第3篇
固定栅格示意
如果开发那边写了一个固定栅格，当你从桌面缩小到平板电脑，就像是在900px的浏览器宽度时，你不会看到任何变化，设计就像是被剪掉了一样。但当达到768px临界点时，设计马上就会改变，平板电脑上的显示效果就会好起来。如果继续减小这个值，同样的事情也会发生，在到达另一个临界值之前，设计看起来都是不变的。
流动网格的示例
现在来看看流动网格的特点，当窗口缩小时，内容将动态的发生变化，文本会进行换行，元素也会变窄。然而，这些元素在内容宽度缩小到下一个临界值之前，布局是不会变化的。
所以我想说的是，设计的临界值只是一个更改布局的参考点。这就是为什么列宽和槽在网格中不会改变的原因，因为我们想让设计师在考虑布局时能够更容易地创建一致性。
3. 混合网格
在实际项目中，使用流动网格和固定网格的组合也是常见的做法。网站通常是流动网格，因为它要去适应各种不同终端的大小。
一些做的很酷的栅格系统
不需要太死板地去坚持传统栅格套路，12、8、4这样的分布，甚至不需要20px的水槽，下面是一些在设计中使用栅格系统做的很棒的设计灵感。
Dropbox Design
使用网格的方式取决于你自己。你可以在主要内容部分使用网格，次要内容则不使用。在Wordpress的例子中，页面中间的部分使用栅格化设计，左侧的侧边栏则没有使用。
The Mockup Club
我非常确定的说，Instagram的PC端是用上了6列栅格布局。
最后，写这篇文章的目的是想提供一些关于如何在响应式设计中使用栅格系统，半人马花了很多年的时间写了大量的网页前端代码来理解栅格系统是如何工作的。学习了很多技术类书籍和教程，我知道很多人都在关注它为什么重要，却不知道其所以然和如何去使用它。
你要做的最好的事情就是从现在开始注意那些优秀设计是如何对齐元素的，如果是网页设计师或者UI设计师，半人马的建议是你最好学习一下基本的前端代码比如html和css,你将会开始看到这些网格是如何工作的。这对于你的专业是具有很大的帮助的。不再盲目限定于设计软件如photoshop给你的画布大小，而茫然，然后在群里问我该设计多大的块？哈哈
希望这篇文章对大家有帮助。
文章中的图片来源于网络，如有侵权请联系我删除！返回搜狐，查看更多