同一页面可能在手机、平板和电脑上显示。栅格帮助设计师组织跨尺寸的布局，但窄屏适配还需要调整列数、内容顺序和间距，不能只缩小整张设计稿。
作为UI设计工具，Pixso希望帮助设计师检查产品在不同尺寸下的布局与体验，而栅格系统可以帮助我们做到这一点。栅格系统在UI设计和前端开发中广泛使用，关键在于让布局规则与实际内容相匹配。建立时可依次确定内容宽度、沟槽和列数，再把卡片、文字与图片对齐到相应区域。
把计算出的列和沟槽放进Pixso的布局与组件能力中使用时，先用真实标题、图片和按钮验证内容是否装得下；栅格是对齐参照，不是替内容做决定。
栅格系统的应用准则
使用栅格系统，能让你的设计具有正式感和规范感，还具有一种结构分明的设计感。但是，栅格系统在设计中的运用必须遵循以下4个准则：
①栅格系统的核心思想是：内容元素必须位于若干列上
栅格系统的核心思想就是内容元素必须位于若干列上，可以任意分割，比如6x2、3x4、4x3。下面例子中是2x4的分割方式。
②用沟槽区分相邻内容
相邻模块之间的沟槽通常保持留白；一个模块跨越多列时，会包含跨列范围内的沟槽，不应把所有沟槽都理解为绝对禁入区。
③父级元素对齐栅格，子级可以不完全对齐列
④除非特意设计，否则不要在列之外区域放置元素
所有重要的内容都应该与总宽度相适应，有时候也不能把总宽度当作全部内容区域，还需给它设定一个内边距，此时它就充当起了留白的作用。不要在网格内部利用列宽当成内边距，而是要与网格最边缘保持对齐，利用网格外部的间距来当作留白区域。
如何建立栅格系统
①确定内容宽度
如果是PC端就是确定你网页内容的整个宽度，因为考虑到不同分辨率的适配，一般页面的左右外间距是不固定的，会根据不同的适配方式而变化。
移动端需要同时确定左右边距和可用内容宽度。边距可以按断点或内容要求调整，文字与控件不应随屏幕宽度无条件等比缩放。
②确定沟槽宽度
沟槽的宽度就是相邻列之间的间距，比如设置成12、24或者10、20等等。确定了沟槽的宽度之后，相应的在后面的设计过程中遇到间距的问题也要设置相应的间距。
③确定栅格列数
列数就是将页面内容区域分成多少等份，比较常用的会是12列或者24列，12和24可以被2、3、4、6等分，这样可以组合出多种布局；是否适用仍取决于内容。
移动端可以使用较少列数，桌面端也可按内容选12列或24列；列数本身不决定页面的复杂度。当然你也可以自己选择自己想要的列数，这些都是辅助而已。
④利用工具建立栅格系统
在Pixso中，可以通过布局网格设置行、列与间距。布局网格提供对齐参照，自动布局则根据所设规则管理容器内元素；矢量网格用于绘制路径，三者不能混为同一种功能。
1200内容宽、12列、24沟槽，单列到底多宽？
先把外边距和内容宽分开。假设画板宽1440，左右边距各120，内容宽就是1200。内容区分为12列，列间共有11条沟槽，每条24，则单列宽为（1200−11×24）÷12＝78。
跨4列的卡片宽度不是4×78，还要包括卡片内部跨过的3条沟槽，所以是4×78＋3×24＝384。三张这样的卡片加上两条24的外部间隔，正好得到384×3＋24×2＝1200。这能同时检查列宽和卡片间距有没有被重复计算。
如果算出小数，可以保留精度交由布局系统分配，也可以调整内容宽或沟槽，但要核对整行总宽；逐列随意四舍五入可能让最后一列错位。与开发沟通时，把内容最大宽度、边距、列数和沟槽分别写清，不只交付一张带粉色辅助线的截图。
到了窄屏，改变布局而不是缩小文字
同一组三张卡片在窄屏可以改为单列。假设视口宽度390、左右边距各20，卡片宽为350；此时保留清楚的字号和操作区域，让文字自然换行。是否从三列改两列、再改单列，应看内容何时拥挤，而不是机械套用某一设备名字。
MDN响应式设计说明将媒体查询、弹性布局与内容适配结合起来。设计稿可以展示关键宽度下的布局，但实际网页仍需由开发实现并在真实内容、缩放和字体加载条件下验收。
栅格系统的应用
平面中栅格系统
栅格系统是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
网页中的栅格系统
网页栅格系统是从平面栅格系统中发展而来，它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。对于设计师来说，栅格系统更多的是一种布局思想，可以更有逻辑地进行设计工作。
灵活地运用栅格系统，不仅可以让整个网站各个页面的布局保持一致，让网页的信息呈现更加美观易读，让设计稿有更好的结构，更可以通过匹配不同组合，做出很多优秀和独特的排版设计。
移动端中的栅格系统
栅格在网页端中一直比较重要，在如今屏幕相对较小（相对电脑），内容划分没有那么多复杂的移动端设计中，栅格系统也起到了很大的作用。
界面栅格提供统一的布局参照。计算后仍需核对实际尺寸与内容适配，再按栅格组织移动端布局。设计师可以将焦点集中在细节的设计和图形界面的创意上，还可快速布局成四列图标、三列图标、两列缩略图等基本常规的布局，并针对目标设备尺寸逐一检查。
栅格系统是一种格式化的设计工具，使用栅格系统是一种好的习惯，可以让你更有逻辑地进行你的设计工作，并且网格系统可以更好地组织画面中的信息，让重要的元素更加鲜明，让设计稿有更好的结构，带来更好的体验。
如果你想尝试使用栅格系统设计的话，强烈推荐打开Pixso开启设计。Pixso拥有强大的栅格系统设计功能，同时，Pixso更具有自动布局、全局样式、矢量网格等智能化设计功能，可以辅助你更好使用Pixso栅格系统来设计作品！
