三、怎么樣建立網頁柵格

1. 確定屏幕尺寸，確定安全范圍

當我們開始著手做一個項目時，首先應考慮在多大的尺寸范圍內做設計，也就是確定柵格區域的寬度范圍。

2. 確定關鍵數據：列的數量、水槽的寬度

常見的柵格系統通常被劃分為12柵格或24柵格。我們需要根據自己的項目確定柵格的劃分數量，劃分的格子越多，承載的內容越精細。通常，在信息繁雜的后臺系統常用24柵格，而一些商業網站、門戶網站通常劃分成12柵格。

柵格不是劃分的越細越好，24柵格精細，但也容易顯得瑣碎，內容排布的規則太多，也就相當于沒有規則。有的項目根據實際情況也會劃分成16柵格、20柵格，也是可以的。

△ 槽的數值越大，頁面留白越多

需要注意的是，槽的區域不可以放置內容。通常，我們會給槽設定一個定值，用來確定欄的大小。

計算公式

我們假設內容區寬度為W(Weight)，列寬為C(Column)，列數為n，槽為定寬G，可以得出：W=C*n。由于槽不可以放置內容，可見內容區為：W=C*n-G。

舉例：我們為一個屏寬1440的項目劃分柵格，首先確定內容區寬度為1440，24列，槽為定值16;那么可以得出列寬60，欄為48。

內容區應從水槽開始到水槽結束：

附：sketch 柵格工具

目前，很多軟件提供自動柵格設置功能，sketch也提供這樣的功能：Layout Settings。

Total Width：相當于 Container，是內容區的寬度。

Offset：表示柵格的偏移量，表示柵格從哪里開始。

Number of Columns：表示柵格的數量。

Gutter on outside：記得勾選。勾選以后柵格的設置才是跟前端的柵格算法匹配。

Gutter Width：槽的值，通常是定值，控制頁面留白間隙。

Column Width：列的值(欄+槽)，也就是柵格單個內容區的寬度。

歡迎關注「宜信大數據用戶體驗設計部」公眾號：