好多小伙伴對(duì)柵格都是迷迷糊糊的，知道柵格的概念卻不知道怎么用、為什么用，每次提到都很頭疼。其實(shí)柵格沒那么難，柵格是是為了輔助設(shè)計(jì)、減少設(shè)計(jì)工作量、使設(shè)計(jì)更理性、更規(guī)律的一種方法。屏幕端對(duì)不同尺寸頁面響應(yīng)式時(shí)更省時(shí)省力對(duì)一種方法，是讓減輕我們工作量對(duì)方法，看到這里是不是心動(dòng)了，那就往下看看～

一、什么是柵格

1. 柵格的由來

柵格就是網(wǎng)格，就是這種有規(guī)律的格子。

哈哈，這樣一說是不是就很接地氣了。英文翻譯過來就是網(wǎng)格，至于現(xiàn)在為什么叫柵格就不得而知道。

柵格最早是應(yīng)用于平面設(shè)計(jì)中，產(chǎn)生于二十世紀(jì)初的西歐，完善于五十年代的瑞士，通過有規(guī)律的網(wǎng)格來指導(dǎo)版面布局。

柵格設(shè)計(jì)的在屏幕端的應(yīng)用也十分廣泛，不光為設(shè)計(jì)服務(wù)，對(duì)響應(yīng)式開發(fā)也起到了很大的作用。雖然開發(fā)小哥說的柵格和我們理解的不太一樣，但也減少了溝通成本。

2. 網(wǎng)格Grid

網(wǎng)格是構(gòu)成頁面柵格系統(tǒng)的最小單位。PC端我們一般用8作為網(wǎng)格的最小單位。

為什么用8？

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

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

3.欄Columns和槽Gutters

欄（Columns）是呈放內(nèi)容區(qū)域。

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

槽（Gutters）是兩個(gè)欄中間的間距。槽的數(shù)量比欄的數(shù)量少一個(gè)。

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

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

為什么用12或24欄？

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

以下是京東首頁的截圖，應(yīng)該是采用了12柵格，并且分別采用了2等分、四等分、六等分、2:6:2:2 、 2:10 。

4. 邊距Margin

柵格寬度外的邊距，通常做自適應(yīng)的距離，例如：小屏和大屏之間做響應(yīng)，就會(huì)改變邊距。

5. 柵格寬度 Container

柵格寬度是需要柵格設(shè)計(jì)區(qū)域的寬度，不是顯示器寬度。

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

則柵格寬度W=24列 x 32欄寬 + 23 列x 16槽寬=1136px，其余寬度做自適應(yīng)處理。

在1920屏寬下如下圖所示：

應(yīng)用原則：

1. 內(nèi)容必須落在欄上，不能落在水槽中；

2. 父元素需對(duì)齊柵格，子元素可再做柵格；

3. 盡量按柵格做等分，平分成5等份也是可以的，前端工程師就需要改底層結(jié)構(gòu)了。

二、為什么用柵格

1. 不用柵格設(shè)計(jì)行不行？ 行！

行，不用柵格沒問題。很多優(yōu)秀作品都沒有刻意的遵守傳統(tǒng)的柵格，反而顯得更加靈動(dòng)。但是打破規(guī)則前得知道規(guī)則才行。

2. 使設(shè)計(jì)更有規(guī)律和邏輯

基于柵格設(shè)計(jì)，按一定的規(guī)律把文字和圖片排列在頁面之中，使版面不光具有視覺感官的美感，也具有嚴(yán)謹(jǐn)?shù)倪壿嫼鸵欢嵚伞?/p>

3. 利于團(tuán)隊(duì)協(xié)作

有了統(tǒng)一的柵格標(biāo)準(zhǔn)，就可以解釋為什么“這個(gè)寬度要用120px，那個(gè)寬度不能用140px……”之類的問題。設(shè)計(jì)團(tuán)隊(duì)之間溝通成本就大大降低，同時(shí)也能提高團(tuán)隊(duì)作業(yè)的一致性。

4. 響應(yīng)式設(shè)計(jì)

現(xiàn)在人們使用的設(shè)備不在局限電腦或者手機(jī)，用戶可能使用任何尺寸的設(shè)備來訪問我們的設(shè)計(jì)。所以我們不能為單一的設(shè)備來設(shè)計(jì)，怎么動(dòng)態(tài)的構(gòu)建我們的設(shè)計(jì)、響應(yīng)不同尺寸的設(shè)備，是設(shè)計(jì)師在起初就應(yīng)該考慮的。

三、柵格系統(tǒng)如何響應(yīng)的

1. 什么是響應(yīng)式設(shè)計(jì)

通俗的講就是：為了讓設(shè)計(jì)在各種尺寸的設(shè)備上都保合理、持美觀，用戶無論用手機(jī)、平板、電腦使用我們的產(chǎn)品時(shí)都有良好都體驗(yàn)。檢測(cè)到不同的屏幕尺寸的時(shí)候改變柵格的一些數(shù)值，變成我們預(yù)先設(shè)計(jì)的樣式，這就是響應(yīng)式設(shè)計(jì)。

2. 柵格是怎么響應(yīng)的

（1）固定柵格

欄和槽的寬度是固定不變的，不隨屏幕的大小而變化。到一定的臨界值的時(shí)候柵格列數(shù)會(huì)發(fā)生變化。

假設(shè)在我們以1920的屏幕大小為畫板，柵格寬度是1136，看到的如下圖：

在2560的屏幕下看頁面，兩側(cè)的留白就會(huì)變大，中間的內(nèi)容保持不變。如下圖：

在1024的屏幕下看頁面，就會(huì)出現(xiàn)橫向滾動(dòng)條，頁面仿佛被截?cái)嘁粯?。如下圖：

在更小的屏幕下，柵格的列數(shù)會(huì)發(fā)生變化。但無論怎么變化，欄和槽的寬度是不變的。如下圖：

在臨界值之間設(shè)計(jì)的布局不會(huì)改變。具體到什么臨界值柵格的列數(shù)會(huì)發(fā)生變化，需要跟開發(fā)說清楚。臨界值設(shè)置多少、設(shè)置多少個(gè)臨界值要根據(jù)實(shí)際情況來制定。

優(yōu)點(diǎn)：設(shè)計(jì)的還原度是最高的，無論在什么什么屏幕下，核心樣式是保持不變的。

缺點(diǎn)：在小屏下會(huì)有滾動(dòng)條。在大屏上左右留白過多，有點(diǎn)浪費(fèi)空間。

（2）流動(dòng)?xùn)鸥?/strong>

欄的寬度是變化的，隨屏幕的大小而變化。槽的寬度固定不變。到一定的臨界值的時(shí)候柵格列數(shù)會(huì)發(fā)生變化。

假設(shè)在我們以1920的屏幕大小為畫板，柵格寬度是1136?？吹降娜缦聢D：

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

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

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

需要把子元素內(nèi)的布局樣式，那些是可以變動(dòng)的地方跟前端說明即可。（例如：當(dāng)連變化時(shí)，卡片內(nèi)的圖標(biāo)保持左對(duì)齊，左邊距不變。文字左對(duì)齊，每行的文字?jǐn)?shù)量自適應(yīng)。）

優(yōu)點(diǎn)：在不同屏幕下會(huì)自動(dòng)放大或縮小，更充分的利用空間。

缺點(diǎn)：由于欄寬是不固定的，樣式可能會(huì)發(fā)生變形。文字可能會(huì)變成多行或者超長的一行。

（3）混合柵格

在同一頁面中可以分成多個(gè)區(qū)域，每個(gè)區(qū)域做不同柵格類型。

四、從0建立后臺(tái)柵格系統(tǒng)

1. 確定柵格的基準(zhǔn)

根據(jù)自家的業(yè)務(wù)場(chǎng)景定下最小單位和柵格數(shù)量，我們以8為最小原子單位距離，之后所有的數(shù)值是8的倍數(shù)，柵格數(shù)量采用12舉例。

2. 確定柵格區(qū)域

后臺(tái)系統(tǒng)和網(wǎng)頁不同，往往邏輯復(fù)雜、數(shù)據(jù)量大，同時(shí)需要獲取、比對(duì)很多的信息。

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

我們選擇設(shè)備比例最多1920×1080為畫板。（這里主要將縱向柵格，暫不考慮瀏覽器自身的標(biāo)簽欄和菜單欄的高度）

制定如下的樣式，數(shù)值僅供參考，照搬的請(qǐng)慎重。

3. 放置內(nèi)容

在欄內(nèi)放置內(nèi)容，內(nèi)容不能在開始和結(jié)尾不能在槽里，內(nèi)容的高度也需要保持8的倍數(shù)。

4. 響應(yīng)策略

（1）大/小屏幕響應(yīng)

當(dāng)屏幕變大時(shí)，左側(cè)藍(lán)色菜單欄保持寬度不變（固定柵格）。右側(cè)柵格區(qū)域的槽保持不變，欄等比例擴(kuò)大。（流動(dòng)?xùn)鸥瘢?/p>

當(dāng)屏幕變小時(shí)，左側(cè)藍(lán)色菜單欄保持寬度不變（固定柵格）。右側(cè)柵格區(qū)域的槽保持不變，欄等比例縮小。（流動(dòng)?xùn)鸥瘢?/p>

（2）平板響應(yīng)

當(dāng)屏幕小到平板的尺寸時(shí)候，柵格區(qū)的內(nèi)容就無法正常顯示了，十分影響體驗(yàn)。于是就是改變柵格的數(shù)量，變成6列柵格，同時(shí)菜單欄收縮簡要模式，這樣就完成了平板端的適配。

（3）手機(jī)響應(yīng)

當(dāng)屏幕是iPhone8、8P…等手機(jī)尺寸時(shí)候，柵格區(qū)就改為更少的柵格，同時(shí)菜單欄變?yōu)闈h堡按鈕。還可以把一些內(nèi)容做隱藏處理，例如常見的咨詢客服、相關(guān)推薦等。

5. 小結(jié)

1. 柵格就是網(wǎng)格

2. 適配時(shí)通常槽的寬度不變、欄的寬度自適應(yīng)

3. 柵格區(qū)域是內(nèi)容區(qū)不是屏幕區(qū)域

4. 柵格響應(yīng)類型：固定柵格、流動(dòng)?xùn)鸥?、混合柵?/p>

作者：Iron設(shè)計(jì)邦；微信公眾號(hào) IRON設(shè)計(jì)邦 

本文由 @Iron設(shè)計(jì)邦 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，。

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