如今，网格几乎是所有网页设计的基础。这些看不见的线条营造出空间上的节奏感和视觉上的流畅感，是让网页更加和谐的基础。

　　然而，网格的目的是帮助你创建一个好的设计。当你开始适应网格的存在，不要被它束缚。你不必100%受限于网格。偶尔打破格子设计可能会让你的设计更引人注目。不过破格保持网页协调是有技巧的。不是任何“变态”的设计都是好的。今天，我们来谈谈这个。

　　理解网格系统

　　要想打破网格，首先要对网格系统有深入的了解。无论你使用什么样的网格，它都是你网页设计过程中的“基础设施”。它帮助您确定如何放置元素，确保不同的控件堆叠在页面上，而不会显得突兀和不协调，并有助于保持页面的组织。

　　事实上，不同领域的设计师一直在使用网格。看报纸和书。在网页设计师开始使用网格之前，他们已经把这个系统玩得很完美了。

　　网格可以做很多事情：

　　保持内容有条理。网格体系下，元素从左到右、从上到下排列清晰，布局一致。让设计更有效率，因为规则的网格让各种UI元素的排列更有规律。让网页的不同页面看起来一致，让元素之间的间距相同，让整个设计保持整洁

　　既然网格有那么多优势，为什么还要破网格？

　　不难理解，网格营造出一致协调的观感，打破网格的元素自然变得更加耀眼，这无疑是一个重点。有很多注意事项要让这个元素打破格子，与其他元素形成匹配。

　　区分层

　　将不同的元素放在不同的层上，可以保证一些元素在网格之外，而另一些元素是一致的。

　　由于材料设计的流行，许多网页已经开始使用图层来管理网页中的不同元素。不同的元素在不同的层中以不同的规则运动，相互重叠和区分，运行效率更高。

　　Cmmnty让线条和文字与图片重叠，借助错位排版营造出不平衡的效果。你会在整个设计中看到网格的痕迹，此时的视觉不平衡相当显眼。

　　有目的地使用空白

　　强调一个元素，留白永远是最有用的手段。只有在合适的地方创造出留白，它所围绕的元素才能脱颖而出。

　　我们经常认为单排或单排布局在移动布局上是合理的，但多排布局也是可行的，重要的是营造一个更整体的视觉设计。例如，在SAS中，当设计人员使用空格来打破传统布局时，文本会在不同的块之间左对齐，并添加中间的图标。这种设计让这些破格元素更加显眼，吸引用户的注意力。留白的使用为这些元素创造了被注意的机会。

　　将元素放入容器中

　　当元素以某种形式包含在其他容器中时，即使网格系统被破坏，也往往给人一种整体感。就像上面的网页一样，打破网格的文本被放在一个彩色的背景中，这就是它的作用。

　　这种放置在容器中的元素，即使不遵循网格标准，也往往给人一种关联的感觉。

　　被包含在一个容器中也打破了网格系统的设计，这是一个有趣的手段。很多容器设计成完全对称，但元素却不是，从某种意义上打破了原本单调的设计。

　　调整特定元素

　　打破格子的最好办法就是用细节来达到这个目的。但这并不意味着处处添加细节，这和留白是一样的。如果网站充斥着突破格子的细节，网站就会彻底陷入混乱。因此，选择特定的元素进行调整更有效。

　　装饰元素是非常好的选择。例如，为需要强调的元素添加醒目的颜色，调整其位置，或微调其位置，使其突破网格系统。

　　Nod之地使用一个长平行四边形来“打破网格”。首先，这个形状不寻常。醒目的红色和半重叠的位置使其在整个设计中脱颖而出。

　　让它动起来

　　借助动态效果将元素从网格系统中分离出来也是一种很好的方法。和前一个一样，单个元素移动时，效果会非常明显，甚至会让整个网格系统显得不那么明显。

　　当然，Trippeo网站采用的方法更激进：保持中间计费的图形位置不变，而背景的所有元素都随之移动。整个网页融合了视频背景、网格系统、视差滚动等各种技术，绝对是奇思妙想和技术的高度融合。

　　制造打破格子的假象

　　有时候，打破格子并不要求你真的“打破”它。借助网格系统中有趣的形状和不对称的搭配，可以创造出“破碎”的效果。

　　不破网的好处是你仍然可以充分利用网格系统的优势，同时做一些与众不同的事情。最好的方法是借助奇数行和奇数列进行设计，添加不完整或不足的元素，造成错误、遗漏、间隙和不对称。就像上面的网站Marche  Notre  Dame，虽然看起来不对称，但内容还是遵循网格布局。

　　标签

　　破格设计不易实现，因为控制不好往往会让整个设计陷入混乱。如何在不破坏整个项目的情况下加入异想天开？多练没有错。