好多小伙伴對柵格都是迷迷糊糊的，知道柵格的概念卻不知道怎么用、為什么用，每次提到都很頭疼。其實(shí)柵格沒那么難，柵格是是為了輔助設(shè)計(jì)、減少設(shè)計(jì)工作量、使設(shè)計(jì)更理性、更規(guī)律的一種方法。屏幕端對不同尺寸頁面響應(yīng)式時(shí)更省時(shí)省力對一種方法，是讓減輕我們工作量對方法，看到這里是不是心動(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ù)，對響應(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. 父元素需對齊柵格，子元素可再做柵格；
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)。檢測到不同的屏幕尺寸的時(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>