當下柵格幾乎成為所有網頁設計的基礎，這些隱形的線條創造出空間的節奏感和視覺的流暢感，讓網頁變得更加和諧美觀。當你逐漸適應柵格的存在時，就沒有必要100%地受限于柵格，偶爾打破柵格的設計可能會讓你的設計更加抓人眼球。那麽，如何突破柵格的限制又保持協調?

了解柵格系統

無論你使用的是哪種樣式的柵格，它都是網頁設計過程中的“基礎設施”，它能幫你確定元素要怎麽放置，幫你確保不同的控件在頁面上堆疊而不會顯得突兀不協調，有助于保持頁面的組織性。

柵格能營造出一致和協調的觀感，打破柵格的元素 自然就顯得更加“刺眼”了，這無疑是一種強調了。想要讓這個元素打破柵格，又能與其他元素形成搭配，有許多講究。

區分圖層

將不同的元素置于不同的圖層，這樣可以確保部分元素超出于柵格，而其他的元素保持一致。

由于Material Design 的流行，如今許多網頁已經開始使用圖層來管理網頁中不同的元素。不同的元素在不同的圖層中，以不同的規則運動，相互交疊又互相區分，更能高效地運作。

　　Cmmnty 這個網頁中，讓線條和文本同圖片産生了交疊，借助錯位的排版營造出一種失衡的效果。你會在整個設計中看到柵格的痕迹，而這個時候的視覺失衡部分，就顯得相當顯眼了。

有目的地使用留白

想要強調一個元素，留白總是最有用的手段。只有在正確的地方創造留白，才能讓其環繞下的元素顯得突出。

在移動端布局上，單列或者單行的布局是比較合理，但是多行列的布局其實也是可行的，重要的是創造出整體性更強的視覺設計。

比如SAS這個網站，當設計師使用留白來打破傳統的布局之時，讓文字左對齊橫跨不同的區塊，加上居中的圖標。這樣的設計令這些打破柵格的元素更加醒目，引起用戶的注意力。留白的使用，爲這些元素創造了“被注意”的機會。

將元素置于容器中

當元素以某種形式被包含到其他的容器當中時，即使柵格系統因此被破壞，也往往能給人一種整體感。

這種被包含在容器中還打破了柵格系統的設計，是一種頗爲有趣的手段。許多容器都被設計成完全對稱的樣式，但是其中的元素則不然，這從某種意義上打破了原本單調的設計。

調整特定的元素

想要打破柵格最好的方法，就需要借助細節來實現這一目的。但這並不意味著到處都要加細節，和留白的道理是一樣，如果網站到處都是突破柵格的細節，那麽網站會徹底陷入混亂的。所以，選取特定的元素來進行調整會更有效。

The Land Of Nod 這個網站就使用較長的平行四邊形來“打破柵格”，首先這個形狀並不常見，醒目的紅色和它半疊加的位置，都讓它從整個設計中脫穎而出。

讓它動起來

借助動效，讓元素從柵格系統中脫離出來，也是個不錯的方法。和上一個相同，當單個元素運動起來的時候，效果會非常明顯，甚至能夠讓整體的柵格系統顯得不是那麽明顯。

當然，Trippeo 這個網站所采用的方法更加激進：它讓中間計費的圖形位置不變，而背景的所有元素都隨之移動，整個網頁融入了視頻背景、柵格系統和視差滾動等多種技術，絕對是奇思妙想和技術的高度融合。

創造打破柵格的幻覺

有的時候，打破柵格並不需要你真的“打破”它。你可以在柵格系統內借助有趣的形狀和非對稱的搭配，營造出“被打破”的效果。利用柵格系統的優勢，同時還能做一些不一樣的東西。

就像上面的Marche Notre Dame 這個網站，雖然看起來不對稱，但是其中的內容依然是沿襲著柵格化的布局。