如果您從未嘗試過在您的設計中使用網格系統，本文很適合您讀一讀。在文中，您將學習關於網格系統基本的術語和理論，並將透過真實網站的案例來了解網格系統是如何在 WordPress 外貿獨立站網站建設中 WooCommerce 獨立站網頁設計領域運用的。在本文中，跨飛獨立站 WordPress 外貿獨立站網站建設小編將整理涉及很多網格系統相關內容。包括：
·什麼是網格系統？
·網格系統專業術語
·三分構圖法
·十二列單元格網格系統
·強調重點
·控制界限
·心智地圖
首先什麼是網格系統？
網格系統可以建立一個網頁基本構架，為您的 WordPress 外貿獨立站網站建設設計提供一個框架。它們由不可見的分割線組成，您的設計元素可以被放置在畫面框架中。這樣做可以使元素在整個網格系統中聯絡起來，併合理地支援您的創作。
網格柵格可以幫助您實現有效的整齊性和一致性，而不需要太多的努力。隨意地按照自己的意願去設定網格系統效果可能並不會太好。如果正確地科學地使用網格，您的設計會顯得有思想，有條理，整潔，結構合理。下圖中 BBC 的網站很好的利用網格系統進行整齊性和一致性的介面設計。
（BBC 網站運用了網格系統進行設計）
好的對齊方式，存在於很多優秀的設計作品中，但幾乎沒有被多使用者注意到。少即是多，如果您太聰明瞭，您可能會分散多使用者的注意力，使他們在搜尋特定內容和快速消化的主要目標上分心。簡潔高效的介面應該是您的設計重點，而不是炫耀您的設計技巧有多漂亮。缺乏對齊是非常顯眼的，會給人留下一種草率的印象。這很可能會導致多使用者對您的設計缺乏信任，除非缺乏對齊的介面是出於某種創造性的原因。
網格系統專業術語
單元格
單元格是每個網格系統的基本構建塊。多個單元格構成整個網格系統。在 BBC 網站的例子中，您看到的是一個 12 列單元格的網格系統。圖中紫色的條紋代表一個單元格。
（BBC 網站中的單元格）
單元格間隙
下圖中的窄黃色條紋代表了把每一個單元分開的單元格間隔。它是一種微小的留白，可以給網格系統一些喘息的空間。
（BBC 網站中的單元格間隙）
豎行
多個單元格和單元格間隔一起構成豎列，它是有效有條理地放置您的內容的容器。在豎列這樣的限制下工作是可以解放的，透過豎列約束可以決定在哪裡放置內容更容易和更高效。
在下圖的例子中，您可以看到三個不同的豎列在共同作用。每一列都是針對特定形式的內容進行強調的。正如您所看到的，您有很多選擇來混合不同形式的內容和設計元素。您還可以觀察到，這些豎列結構構成了一種堅固的結構，透過排列來創造一致性和整齊性。對於設定幾行有約束力的豎列，並沒有付出壞的代價，難道不是嗎？
（BBC 網站中的豎列）
區域
包含內容的豎列形成了水平劃分頁面的區域。在您的頁面上爭取區域相同的高度是一個不錯的主意。在實踐中，這並不總是容易實現的。如果您的區域的高度和您的設計一樣高，這樣很好，如果不是，那應該嘗試做一下。