柵格系統(tǒng)在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規(guī)律，從而減少了設計決策成本；提高了頁面布局的一致性跟復用性。本文主要圍繞什么是柵格系統(tǒng)，如何搭建柵格系統(tǒng)，柵格系統(tǒng)的應用 三個部分進行闡述，在項目中提前定義好柵格系統(tǒng)將有助于協(xié)作的設計師輸出元素間距高度統(tǒng)一的頁面，希望對正在了解柵格知識的你有幫助！??！

1. 什么是柵格系統(tǒng)

1.1 網格單位

柵格是由一系列規(guī)律的小網格組成的網格系統(tǒng)，網格構成頁面的最小單位。在網頁設計中經常將網格的大小定義為8，不僅符合偶數的思路同時能夠匹配多數主流的顯示設備，目前前端開源組件庫也多基于8的原子單位來設計。

1.2 列+槽（ Column+Gutter ）

柵格系統(tǒng)是由列（Column）跟槽（Gutter）交替分布形成的，列（Column）是柵格的數量單位，通常設定柵格數量說的就是列的數量，比如12柵格就有12個列、24柵格就有24個列。槽（Gutter）頁面內容的間距，槽的數值越大，頁面留白越多，視覺效果越松散；反之，頁面越緊湊。槽通常設為定值。

1.3 盒子/區(qū)域

建立好基礎柵格之后，一塊內容通常會占用幾個欄和列的寬度，我們把這個區(qū)域理解為內容盒子，用于承載一個區(qū)域的內容。

2. 如何搭建柵格系統(tǒng)

2.1 確定柵格區(qū)域的寬度

以《「交互規(guī)范」框架布局讓頁面模塊更統(tǒng)一》 全局控制層布局中 “全屏”為例，柵格的區(qū)域的寬度 = 響應式區(qū)域 – 頁邊距*2。

以《「交互規(guī)范」框架布局讓頁面模塊更統(tǒng)一》 全局控制層布局中“固定寬度”為例，柵格的區(qū)域的寬度 = 響應式區(qū)域。

2.2 確定列的數量、槽的寬度

常見的柵格系統(tǒng)通常被劃分為12柵格或24柵格。槽的區(qū)域不可以放置內容，我們會給槽設定一個定值，用來確定欄的大小。

計算公式： 柵格區(qū)域寬度 = n*(列寬的度+槽的寬度) – 槽的寬度。

柵格化工具推薦： GridGuide

12柵格系統(tǒng)：

12柵格系統(tǒng)在流行的前端開發(fā)開源工具庫 Bootstrap 與 Foundation 中廣泛使用，適用于業(yè)務信息分組較少，單個盒子內信息體積較大的中后臺頁面設計。

24柵格系統(tǒng)：

24柵格系統(tǒng)適用于業(yè)務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計。相對12柵格系統(tǒng)，24柵格系統(tǒng)變化更加靈活，更適合內容比較多樣復雜的場景。

3. 柵格系統(tǒng)的應用

3.1 橫向劃分

以12柵格系統(tǒng)為例，根據業(yè)務場景可以很容易的將柵格區(qū)域劃分成2等分、3等分、4等分、6等分，以及根據等分模塊組合的多種不等分場景。

以查詢頁為例，“篩選區(qū)域” 按3等分劃分，“數據統(tǒng)計” 按3等分劃分，“數據列表” 按1等分劃分。

3.2 縱向劃分

縱向劃分以8為基礎間距，通過 8px（小號間距）、16px（中號間距）、24px（大號間距）這三種規(guī)格來劃分信息層次。

在這三種規(guī)格不適用的情況下，可以通過加減「基礎間距」的倍數，或者增加元素 ( 分割線 ) 來拉開信息層次。計算公式：y = 8 + 8 * n ( n >= 0，y 是縱向間距)。

「總結」

在一個項目中，涉及到多個設計師協(xié)同完成項目，由于每個設計師的使用的畫板不一定相同，建議 “統(tǒng)一畫板” 尺寸1440，根據框架中”全局控制層”、”內容層”、”臨時層”各層布局進一步確定項目全局的布局，讓參與的設計師有了統(tǒng)一的頁面布局基礎，在根據不同的業(yè)務場景完成設計，最終不同設計師產出的設計在布局上將會高度統(tǒng)一。

如果你正在設計 0-1 項目的，希望布局三部曲《框架布局》、《柵格系統(tǒng)》、《響應式》對你有所幫助?。。?/p>

本文由 @前行的大熊 原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協(xié)議