編者按：本文適合對柵格系統不熟悉的新人閱讀，大量的配圖和深入淺出的闡述可以讓你快速理解什么是柵格系統。

馬小晴：我們都知道在平面設計里，運用網格輔助設計，可以讓頁面富有統一的秩序感和韻律。在網頁設計里，我們也需要視覺表現出統一性和一致性，讓頁面更加專業和系統化;但同時，網頁設計相對于傳統平面設計也更強調動態化、體系化的思考。柵格系統可以輔助我們制定網頁設計的規則，了解柵格的基本原理和前端應用對于網頁設計來說就變得非常重要了。

[[250288]]

一、網頁端柵格系統的必要性

1. 專業

制定一套頁面的基礎規則，可以保持整體設計的一致性、專業性;避免無效的設計嘗試，專注于有意義的設計方向。

2. 高效

遵循柵格系統的設計細節，無論是元素、模塊或頁面，都有規律可循，減少設計決策的時間、減少外部的溝通損耗，提升工作效率。

3. 布局基礎

柵格系統的應用，可以作為響應式網頁布局的基礎。

二、柵格系統的基礎概念

• 網格(Gird)：柵格系統的最小原子單位
• 列、水槽(Column、Gutter)
• 柵格總寬(Container)
• 邊距(Margin)
• 盒子/區域(Col-n)

1. 網格：柵格系統的最小原子單位

柵格是由一系列規律的小網格組成的網格系統，網格構成頁面的最小單位。通常，在網頁設計中經常使用8作為柵格的最小步進單位，一些知名公司都以8為最小單位劃分網格，規范頁面秩序，比如：Ant Design、Matierial Design等。

編者注：設計規范官網匯總 → https://www.uisdc.com/design-specification-website

這樣做的好處有兩方面。

偶數思維：以8為基礎倍數，元素大小可以被大多數瀏覽器識別并整除，***程度避免出現半像素的情況。

規律性：所有元素以8像素為步進單位，元素大小、間距有規律可循。

為什么不是6、10或者其他?

以8為步進單位，進度合適，既不顯得過于瑣碎，也不會因為間隔太大而顯得內容分散;眾多開源代碼都以8的倍數作為默認設計大小;已被多次論證，8點柵格甚至已經形成了一套理論。

凡事沒有絕對，如果做固定結構的網頁布局，不考慮響應式網頁設計，也可以自行根據實際情況以偶數作為最小單位來設計網格。

為什么強烈推薦「8點柵格」→ 《讓設計更高效!正式為大家安利這個好用的「8點柵格」》

2. 列+槽(Column+Gutter)

• 列(Column)：列是柵格的數量單位，通常設定柵格數量說的就是列的數量，比如12柵格就有12個列、24柵格就有24個列。通過設定列的內邊距(padding)來定制槽(Gutter)的大小，剩余的部分稱為欄。

槽(Gutter)：頁面內容的間距，槽的數值越大，頁面留白越多，視覺效果越松散;反之，頁面越緊湊。槽通常設為定值。

• 3. 柵格寬度(Container)
• 柵格寬度(Container)：頁面柵格系統的總寬度。

4. 邊距(Margin)

• 邊距(Margin)：柵格外邊距，與屏寬保持一定的安全距離.
• 行：柵格系統的橫向網格，與縱向網格的列成垂直狀態，列和行交叉的區域形成頁面的內容區，由于目前網頁多采用瀑布流形式，上下滑動區域變得不受限制，隨意性很高，本文忽略這一部分。

這里需要注意的是：我們把柵格的列(Column)看做是欄+槽的寬度，12柵格即是指12列。有一些文章對欄和槽的理解是下方左圖的樣子，而從開發角度來說，下方右圖是前端理解的柵格。我們用柵格來制定頁面視覺規則，同時也要理解開發怎樣實現柵格，才能在工作中減少不必要的溝通誤區。

5. 盒子/區域

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

以上，柵格的基礎概念已經清楚了，那怎樣著手給自己的項目建立柵格系統呢?

三、怎么樣建立網頁柵格

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：列的值(欄+槽)，也就是柵格單個內容區的寬度。