部落冲突家乡5本最强布阵部落冲突5本最强布阵( 四 ) _知识分享

举个例子，以1920px的宽度、12栅格为例，内容区宽度可以是1000px、1200px、1400px、1600px…，每一次内容区宽度的变化都要将栅格的列宽重新调整，永远无法将栅格每次整除，即便偶尔也是例外。

文章插图
3. 栅格区域外的内容栅格是为了规范内容，并不是所有的内容都需要栅格。大多数情况下我们只需要将主要内容区域遵循栅格系统即可，其他部分如固定导航、侧边悬浮栏、右下角弹窗…等不一定要跟随屏幕尺寸或内容的变化而变化。

文章插图
4. 合理的打破栅格对齐对齐在栅格系统中的地位可谓是举足轻重，不过在一些特殊场景中不必为了对齐而对齐，在不影响视觉效果的前提下，可以根据实际情况合理的打破对齐。
如下图中的照片墙，利用极小的间距将一些宽度不同的照片排列在一起，虽然没有同栅格的列宽对齐，但我们第一眼很容易将这些照片联想成一个整体，同时又能轻松的单独区分开来，也不会影响整体布局。

文章插图
5. 子父级模块对齐父级在部分场景中，当我们以卡片的形式将多个内容形成一个信息组，这时可以忽略子级元素的对齐方式，父级卡片遵守栅格对齐即可。

文章插图
结语栅格系统能为设计提供便捷，有助于设计效率的提升，很多设计师都会去关注栅格为什么重要，却容易忽略栅格在实际项目中的使用原则，同时还要伴随一些限制条件，所以并没有平常想象的那么简单。
本篇文章提供了栅格系统的基础知识，希望能够抛砖引玉，帮助大家解决在使用过程中遇到的常见问题，让栅格更好的服务于设计，若有不足之处，欢迎补充。
专栏作家
大漠飞鹰；公众号：能量眼球，人人都是产品经理专栏作家。致力于产品需求的驱动、产品体验的挖掘，利用设计的手段为受众用户带来更好的体验，即好看、好用。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
【部落冲突家乡5本最强布阵部落冲突5本最强布阵】题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

部落冲突家乡5本最强布阵 部落冲突5本最强布阵( 四 )

部落冲突家乡5本最强布阵部落冲突5本最强布阵( 四 )