我們都知道在平面設(shè)計(jì)里寥茫，運(yùn)用網(wǎng)格輔助設(shè)計(jì)膀钠，可以讓頁面富有統(tǒng)一的秩序感和韻律葛碧。在網(wǎng)頁設(shè)計(jì)里池摧，我們也需要視覺表現(xiàn)出統(tǒng)一性和一致性煌茬，讓頁面更加專業(yè)和系統(tǒng)化可柿；但同時(shí)散休，網(wǎng)頁設(shè)計(jì)相對于傳統(tǒng)平面設(shè)計(jì)也更強(qiáng)調(diào)動態(tài)化单鹿、體系化的思考馏予。柵格系統(tǒng)可以輔助我們制定網(wǎng)頁設(shè)計(jì)的規(guī)則天梧，了解柵格的基本原理和前端應(yīng)用對于網(wǎng)頁設(shè)計(jì)來說就變得非常重要了。
一霞丧、網(wǎng)頁端柵格系統(tǒng)的必要性
1. 專業(yè)
制定一套頁面的基礎(chǔ)規(guī)則腿倚，可以保持整體設(shè)計(jì)的一致性、專業(yè)性蚯妇；避免無效的設(shè)計(jì)嘗試敷燎，專注于有意義的設(shè)計(jì)方向。
2. 高效
遵循柵格系統(tǒng)的設(shè)計(jì)細(xì)節(jié)箩言，無論是元素硬贯、模塊或頁面，都有規(guī)律可循陨收，減少設(shè)計(jì)決策的時(shí)間饭豹、減少外部的溝通損耗，提升工作效率务漩。
3. 布局基礎(chǔ)
柵格系統(tǒng)的應(yīng)用拄衰，可以作為響應(yīng)式網(wǎng)頁布局的基礎(chǔ)。
二饵骨、柵格系統(tǒng)的基礎(chǔ)概念
網(wǎng)格（Gird）：柵格系統(tǒng)的最小原子單位
列翘悉、水槽（Column、Gutter）
柵格總寬（Container）
邊距（Margin）
盒子/區(qū)域（Col-n）
1. 網(wǎng)格：柵格系統(tǒng)的最小原子單位
柵格是由一系列規(guī)律的小網(wǎng)格組成的網(wǎng)格系統(tǒng)居触，網(wǎng)格構(gòu)成頁面的最小單位妖混。通常老赤，在網(wǎng)頁設(shè)計(jì)中經(jīng)常使用8作為柵格的最小步進(jìn)單位，一些知名公司都以8為最小單位劃分網(wǎng)格制市，規(guī)范頁面秩序抬旺，比如：Ant Design、Matierial Design等祥楣。
這樣做的好處有兩方面开财。
偶數(shù)思維：以8為基礎(chǔ)倍數(shù)，元素大小可以被大多數(shù)瀏覽器識別并整除误褪，最大程度避免出現(xiàn)半像素的情況床未。
規(guī)律性：所有元素以8像素為步進(jìn)單位，元素大小振坚、間距有規(guī)律可循。
為什么不是6斋扰、10或者其他渡八？
以8為步進(jìn)單位，進(jìn)度合適传货，既不顯得過于瑣碎屎鳍，也不會因?yàn)殚g隔太大而顯得內(nèi)容分散；眾多開源代碼都以8的倍數(shù)作為默認(rèn)設(shè)計(jì)大形试！逮壁；已被多次論證，8點(diǎn)柵格甚至已經(jīng)形成了一套理論粮宛。
凡事沒有絕對窥淆，如果做固定結(jié)構(gòu)的網(wǎng)頁布局，不考慮響應(yīng)式網(wǎng)頁設(shè)計(jì)巍杈，也可以自行根據(jù)實(shí)際情況以偶數(shù)作為最小單位來設(shè)計(jì)網(wǎng)格忧饭。
2. 列+槽（Column+Gutter）
列（Column）：列是柵格的數(shù)量單位，通常設(shè)定柵格數(shù)量說的就是列的數(shù)量筷畦，比如12柵格就有12個(gè)列词裤、24柵格就有24個(gè)列。通過設(shè)定列的內(nèi)邊距（padding）來定制槽（Gutter）的大小鳖宾，剩余的部分稱為欄吼砂。
槽（Gutter）：頁面內(nèi)容的間距，槽的數(shù)值越大鼎文，頁面留白越多渔肩，視覺效果越松散；反之拇惋，頁面越緊湊赖瞒。槽通常設(shè)為定值女揭。
3. 柵格寬度（Container）
柵格寬度（Container）：頁面柵格系統(tǒng)的總寬度。
4. 邊距（Margin）
邊距（Margin）：柵格外邊距栏饮，與屏寬保持一定的安全距離.
行：柵格系統(tǒng)的橫向網(wǎng)格吧兔，與縱向網(wǎng)格的列成垂直狀態(tài)，列和行交叉的區(qū)域形成頁面的內(nèi)容區(qū)袍嬉，由于目前網(wǎng)頁多采用瀑布流形式境蔼，上下滑動區(qū)域變得不受限制，隨意性很高伺通，本文忽略這一部分箍土。
這里需要注意的是：我們把柵格的列（Column）看做是欄+槽的寬度，12柵格即是指12列罐监。有一些文章對欄和槽的理解是下方左圖的樣子吴藻，而從開發(fā)角度來說，下方右圖是前端理解的柵格弓柱。我們用柵格來制定頁面視覺規(guī)則沟堡，同時(shí)也要理解開發(fā)怎樣實(shí)現(xiàn)柵格，才能在工作中減少不必要的溝通誤區(qū)矢空。
5. 盒子/區(qū)域
建立好基礎(chǔ)柵格之后航罗，一塊內(nèi)容通常會占用幾個(gè)欄和列的寬度，我們把這個(gè)區(qū)域理解為內(nèi)容盒子屁药，用于承載一個(gè)區(qū)域的內(nèi)容粥血。
以上，柵格的基礎(chǔ)概念已經(jīng)清楚了酿箭，那怎樣著手給自己的項(xiàng)目建立柵格系統(tǒng)呢复亏？
三、怎么樣建立網(wǎng)頁柵格
1. 確定屏幕尺寸缭嫡，確定安全范圍
當(dāng)我們開始著手做一個(gè)項(xiàng)目時(shí)蜓耻，首先應(yīng)考慮在多大的尺寸范圍內(nèi)做設(shè)計(jì)，也就是確定柵格區(qū)域的寬度范圍械巡。
2. 確定關(guān)鍵數(shù)據(jù)：列的數(shù)量刹淌、水槽的寬度
常見的柵格系統(tǒng)通常被劃分為12柵格或24柵格。我們需要根據(jù)自己的項(xiàng)目確定柵格的劃分?jǐn)?shù)量讥耗，劃分的格子越多有勾，承載的內(nèi)容越精細(xì)。通常古程，在信息繁雜的后臺系統(tǒng)常用24柵格蔼卡，而一些商業(yè)網(wǎng)站、門戶網(wǎng)站通常劃分成12柵格挣磨。
柵格不是劃分的越細(xì)越好雇逞，24柵格精細(xì)荤懂，但也容易顯得瑣碎，內(nèi)容排布的規(guī)則太多塘砸，也就相當(dāng)于沒有規(guī)則节仿。有的項(xiàng)目根據(jù)實(shí)際情況也會劃分成16柵格、20柵格掉蔬，也是可以的廊宪。
△ 槽的數(shù)值越大，頁面留白越多
需要注意的是女轿，槽的區(qū)域不可以放置內(nèi)容箭启。通常，我們會給槽設(shè)定一個(gè)定值蛉迹，用來確定欄的大小傅寡。
計(jì)算公式
我們假設(shè)內(nèi)容區(qū)寬度為W（Weight），列寬為C（Column）北救，列數(shù)為n荐操，槽為定寬G，可以得出：W=C*n扭倾。由于槽不可以放置內(nèi)容，可見內(nèi)容區(qū)為：W=C*n-G挽绩。
舉例：我們?yōu)橐粋€(gè)屏寬1440的項(xiàng)目劃分柵格膛壹，首先確定內(nèi)容區(qū)寬度為1440，24列唉堪，槽為定值16模聋；那么可以得出列寬60，欄為48唠亚。
內(nèi)容區(qū)應(yīng)從水槽開始到水槽結(jié)束：
附：sketch 柵格工具
目前链方，很多軟件提供自動?xùn)鸥裨O(shè)置功能，sketch也提供這樣的功能：Layout Settings灶搜。
Total Width：相當(dāng)于 Container祟蚀，是內(nèi)容區(qū)的寬度。
Offset：表示柵格的偏移量割卖，表示柵格從哪里開始前酿。
Number of Columns：表示柵格的數(shù)量。
Gutter on outside：記得勾選鹏溯。勾選以后柵格的設(shè)置才是跟前端的柵格算法匹配罢维。
Gutter Width：槽的值，通常是定值丙挽，控制頁面留白間隙肺孵。
Column Width：列的值（欄+槽）匀借，也就是柵格單個(gè)內(nèi)容區(qū)的寬度。
原作者公眾號：「宜信大數(shù)據(jù)用戶體驗(yàn)設(shè)計(jì)部」
