好多小夥伴對栅格都是迷迷糊糊的，知道栅格的概念卻不知道怎麼用、為什麼用，每次提到都很頭疼。其實栅格沒那麼難，栅格是是為了輔助設計、減少設計工作量、使設計更理性、更規律的一種方法。屏幕端對不同尺寸頁面響應式時更省時省力對一種方法，是讓減輕我們工作量對方法，看到這裡是不是心動了，那就往下看看～

一、什麼是栅格

1. 栅格的由來

栅格就是網格，就是這種有規律的格子。

哈哈，這樣一說是不是就很接地氣了。英文翻譯過來就是網格，至于現在為什麼叫栅格就不得而知道。

栅格最早是應用于平面設計中，産生于二十世紀初的西歐，完善于五十年代的瑞士，通過有規律的網格來指導版面布局。

栅格設計的在屏幕端的應用也十分廣泛，不光為設計服務，對響應式開發也起到了很大的作用。雖然開發小哥說的栅格和我們理解的不太一樣，但也減少了溝通成本。

2. 網格Grid

網格是構成頁面栅格系統的最小單位。PC端我們一般用8作為網格的最小單位。

為什麼用8？

盡量保持單位是偶數，這樣在頁面放大或者放大或者縮小時還能保持清晰。在保證偶數的前提下，使用“ 2、4、6、8、10、12… ”作為最小單位都是可以的。

通常情況下PC端橫向是固定的，縱向是可以滾動的。根據2019年中國PC端分辨率端統計，“4、8”隻有不能被1366整除，其他都可以。由于4過于小，普通用戶從視覺上不容易分辨差别，所以我們選用8作為最小單位。之後所有的數值都使用8的倍數。

3.欄Columns和槽Gutters

欄（Columns）是呈放内容區域。

PC端通常有12栅格或24栅格，意思就是縱向有12欄或24欄。

槽（Gutters）是兩個欄中間的間距。槽的數量比欄的數量少一個。

假設是栅格寬度是W、欄的寬度是C、槽的寬度是G。有N個欄，就有N-1個槽，則可以推斷出算出W=N*C （N-1）G。

忘掉 欄 槽=列的概念（個人感覺沒有作用，有不同見解的歡迎讨論。）

為什麼用12或24欄？

12欄和24欄都是PC端較常用的，移動端用4欄的居多，分的越細可變化的内容越豐富。但過于細也會使頁面變得很碎，差異感和韻律感降低。12或24欄可以被2等分、3等分、4等分、6等分、12等分，還能按 1:2:1 、 1:3:2 、 1:2:2:1……等比例分割，提供了足夠豐富的變化。

以下是京東首頁的截圖，應該是采用了12栅格，并且分别采用了2等分、四等分、六等分、2:6:2:2 、 2:10 。

4. 邊距Margin

栅格寬度外的邊距，通常做自适應的距離，例如：小屏和大屏之間做響應，就會改變邊距。

5. 栅格寬度 Container

栅格寬度是需要栅格設計區域的寬度，不是顯示器寬度。

舉例：假設我們以1920px的屏幕為畫闆作圖、使用24列栅格。設定欄的寬度為32px4（個原子單位），槽的寬度為16px（2個原子單位）。

則栅格寬度W=24列 x 32欄寬 23 列x 16槽寬=1136px，其餘寬度做自适應處理。

在1920屏寬下如下圖所示：

應用原則：

1. 内容必須落在欄上，不能落在水槽中；
2. 父元素需對齊栅格，子元素可再做栅格；
3. 盡量按栅格做等分，平分成5等份也是可以的，前端工程師就需要改底層結構了。

二、為什麼用栅格

1. 不用栅格設計行不行？ 行！

行，不用栅格沒問題。很多優秀作品都沒有刻意的遵守傳統的栅格，反而顯得更加靈動。但是打破規則前得知道規則才行。

2. 使設計更有規律和邏輯

基于栅格設計，按一定的規律把文字和圖片排列在頁面之中，使版面不光具有視覺感官的美感，也具有嚴謹的邏輯和一定韻律。

3. 利于團隊協作

有了統一的栅格标準，就可以解釋為什麼“這個寬度要用120px，那個寬度不能用140px……”之類的問題。設計團隊之間溝通成本就大大降低，同時也能提高團隊作業的一緻性。

4. 響應式設計

現在人們使用的設備不在局限電腦或者手機，用戶可能使用任何尺寸的設備來訪問我們的設計。所以我們不能為單一的設備來設計，怎麼動态的構建我們的設計、響應不同尺寸的設備，是設計師在起初就應該考慮的。

三、栅格系統如何響應的

1. 什麼是響應式設計

通俗的講就是：為了讓設計在各種尺寸的設備上都保合理、持美觀，用戶無論用手機、平闆、電腦使用我們的産品時都有良好都體驗。檢測到不同的屏幕尺寸的時候改變栅格的一些數值，變成我們預先設計的樣式，這就是響應式設計。

2. 栅格是怎麼響應的

（1）固定栅格

欄和槽的寬度是固定不變的，不随屏幕的大小而變化。到一定的臨界值的時候栅格列數會發生變化。

假設在我們以1920的屏幕大小為畫闆，栅格寬度是1136，看到的如下圖：

在2560的屏幕下看頁面，兩側的留白就會變大，中間的内容保持不變。如下圖：

在1024的屏幕下看頁面，就會出現橫向滾動條，頁面仿佛被截斷一樣。如下圖：

在更小的屏幕下，栅格的列數會發生變化。但無論怎麼變化，欄和槽的寬度是不變的。如下圖：

在臨界值之間設計的布局不會改變。具體到什麼臨界值栅格的列數會發生變化，需要跟開發說清楚。臨界值設置多少、設置多少個臨界值要根據實際情況來制定。

優點：設計的還原度是最高的，無論在什麼什麼屏幕下，核心樣式是保持不變的。

缺點：在小屏下會有滾動條。在大屏上左右留白過多，有點浪費空間。

（2）流動栅格

欄的寬度是變化的，随屏幕的大小而變化。槽的寬度固定不變。到一定的臨界值的時候栅格列數會發生變化。

假設在我們以1920的屏幕大小為畫闆，栅格寬度是1136。看到的如下圖：

在2560的屏幕下看頁面，槽的寬度保持不變，欄的寬度發生改變。如下圖：

在1024的屏幕下看頁面，槽的寬度保持不變，欄的寬度發生改變。如下圖：

問題來了，這樣一算欄的像素就不但不是偶數，而且還不是整數了，怎麼辦，屏幕該怎麼顯示呢？沒關系，有的卡片可能是351個像素，有的是356個像素，這樣1像素的差距在屏幕上很難看出差别來，為了在不同大小的屏幕上适配，這1像素是可以忍受的。

需要把子元素内的布局樣式，那些是可以變動的地方跟前端說明即可。（例如：當連變化時，卡片内的圖标保持左對齊，左邊距不變。文字左對齊，每行的文字數量自适應。）

優點：在不同屏幕下會自動放大或縮小，更充分的利用空間。

缺點：由于欄寬是不固定的，樣式可能會發生變形。文字可能會變成多行或者超長的一行。

（3）混合栅格

在同一頁面中可以分成多個區域，每個區域做不同栅格類型。

四、從0建立後台栅格系統

1. 确定栅格的基準

根據自家的業務場景定下最小單位和栅格數量，我們以8為最小原子單位距離，之後所有的數值是8的倍數，栅格數量采用12舉例。

2. 确定栅格區域

後台系統和網頁不同，往往邏輯複雜、數據量大，同時需要獲取、比對很多的信息。

信息以表格、表單居多，所以屏幕的寬度就顯得很重要了，寸土寸金。所以通常選中全部填充的樣式，舍棄兩側留白的樣式。

我們選擇設備比例最多1920×1080為畫闆。（這裡主要将縱向栅格，暫不考慮浏覽器自身的标簽欄和菜單欄的高度）

制定如下的樣式，數值僅供參考，照搬的請慎重。

3. 放置内容

在欄内放置内容，内容不能在開始和結尾不能在槽裡，内容的高度也需要保持8的倍數。

4. 響應策略

（1）大/小屏幕響應

當屏幕變大時，左側藍色菜單欄保持寬度不變（固定栅格）。右側栅格區域的槽保持不變，欄等比例擴大。（流動栅格）

當屏幕變小時，左側藍色菜單欄保持寬度不變（固定栅格）。右側栅格區域的槽保持不變，欄等比例縮小。（流動栅格）

（2）平闆響應

當屏幕小到平闆的尺寸時候，栅格區的内容就無法正常顯示了，十分影響體驗。于是就是改變栅格的數量，變成6列栅格，同時菜單欄收縮簡要模式，這樣就完成了平闆端的适配。

（3）手機響應

當屏幕是iPhone8、8P…等手機尺寸時候，栅格區就改為更少的栅格，同時菜單欄變為漢堡按鈕。還可以把一些内容做隐藏處理，例如常見的咨詢客服、相關推薦等。

5. 小結

1. 栅格就是網格
2. 适配時通常槽的寬度不變、欄的寬度自适應
3. 栅格區域是内容區不是屏幕區域
4. 栅格響應類型：固定栅格、流動栅格、混合栅格

#相關閱讀#

手把手教你做設計規範（1）：顔色篇

手把手教你做設計規範（2）：圖标篇

手把手教你做設計規範（3）：設計原則篇

手把手教你做設計規範（4）：文案篇

作者：Iron設計邦；微信公衆号 IRON設計邦

本文由 @Iron設計邦 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,