柵格系統(tǒng)在頁(yè)面排版布局捎谨、尺寸設(shè)定方面給了設(shè)計(jì)者直觀的參考曼库，它讓頁(yè)面設(shè)計(jì)變得有規(guī)律，從而減少了設(shè)計(jì)決策成本臀防；提高了頁(yè)面布局的一致性跟復(fù)用性眠菇。
本文主要圍繞什么是柵格系統(tǒng)，如何搭建柵格系統(tǒng)袱衷，柵格系統(tǒng)的應(yīng)用 三個(gè)部分進(jìn)行闡述琼锋，在項(xiàng)目中提前定義好柵格系統(tǒng)將有助于協(xié)作的設(shè)計(jì)師輸出元素間距高度統(tǒng)一的頁(yè)面，希望對(duì)正在了解柵格知識(shí)的你有幫助Ｋ钫选Ｂ瓶病！
1篡悟、什么是柵格系統(tǒng)
柵格系統(tǒng)（grid systems）谜叹，也叫“網(wǎng)格系統(tǒng)”匾寝。網(wǎng)頁(yè)柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來(lái)，以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布荷腊。
1.1艳悔、網(wǎng)格單位
柵格是由一系列規(guī)律的小網(wǎng)格組成的網(wǎng)格系統(tǒng)，網(wǎng)格構(gòu)成頁(yè)面的最小單位女仰。在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常將網(wǎng)格的大小定義為8猜年，不僅符合偶數(shù)的思路同時(shí)能夠匹配多數(shù)主流的顯示設(shè)備，目前前端開(kāi)源組件庫(kù)也多基于8的原子單位來(lái)設(shè)計(jì)疾忍。
1.2乔外、列+槽（ Column+Gutter ）
柵格系統(tǒng)是由列（Column）跟槽（Gutter）交替分布形成的，列（Column）是柵格的數(shù)量單位一罩，通常設(shè)定柵格數(shù)量說(shuō)的就是列的數(shù)量杨幼，比如12柵格就有12個(gè)列、24柵格就有24個(gè)列聂渊。槽（Gutter）頁(yè)面內(nèi)容的間距差购，槽的數(shù)值越大，頁(yè)面留白越多汉嗽，視覺(jué)效果越松散欲逃；反之，頁(yè)面越緊湊饼暑。槽通常設(shè)為定值稳析。
1.3、盒子/區(qū)域
建立好基礎(chǔ)柵格之后撵孤，一塊內(nèi)容通常會(huì)占用幾個(gè)欄和列的寬度，我們把這個(gè)區(qū)域理解為內(nèi)容盒子竭望，用于承載一個(gè)區(qū)域的內(nèi)容邪码。
2、如何搭建柵格系統(tǒng)
2.1咬清、確定柵格區(qū)域的寬度
以《「交互規(guī)范」系統(tǒng)布局讓頁(yè)面模塊更統(tǒng)一》模塊布局中 “全屏”為例闭专，柵格的區(qū)域的寬度 = 響應(yīng)式區(qū)域 - 頁(yè)邊距*2
以《「交互規(guī)范」系統(tǒng)布局讓頁(yè)面模塊更統(tǒng)一》模塊布局中“在屏幕垂直中間選擇合適的區(qū)域”為例，柵格的區(qū)域的寬度 = 響應(yīng)式區(qū)域
2.2旧烧、確定列的數(shù)量影钉、槽的寬度
常見(jiàn)的柵格系統(tǒng)通常被劃分為12柵格或24柵格。槽的區(qū)域不可以放置內(nèi)容掘剪，我們會(huì)給槽設(shè)定一個(gè)定值平委，用來(lái)確定欄的大小。
計(jì)算公式： 柵格區(qū)域?qū)挾?= n*(列寬的度+槽的寬度) - 槽的寬度
柵格化工具推薦： GridGuide
12柵格系統(tǒng)
12柵格系統(tǒng)在流行的前端開(kāi)發(fā)開(kāi)源工具庫(kù) Bootstrap 與 Foundation 中廣泛使用夺谁，適用于業(yè)務(wù)信息分組較少廉赔，單個(gè)盒子內(nèi)信息體積較大的中后臺(tái)頁(yè)面設(shè)計(jì)肉微。
24柵格系統(tǒng)
24柵格系統(tǒng)適用于業(yè)務(wù)信息量大、信息分組較多蜡塌、單個(gè)盒子內(nèi)信息體積較小的中后臺(tái)頁(yè)面設(shè)計(jì)碉纳。相對(duì)12柵格系統(tǒng)，24柵格系統(tǒng)變化更加靈活馏艾，更適合內(nèi)容比較多樣復(fù)雜的場(chǎng)景劳曹。
3、柵格系統(tǒng)的應(yīng)用
3.1琅摩、橫向劃分
以12柵格系統(tǒng)為例铁孵，根據(jù)業(yè)務(wù)場(chǎng)景可以很容易的將柵格區(qū)域劃分成2等分、3等分迫吐、4等分库菲、6等分，以及根據(jù)等分模塊組合的多種不等分場(chǎng)景志膀。
以查詢頁(yè)為例熙宇，“篩選區(qū)域” 按3等分劃分，“數(shù)據(jù)統(tǒng)計(jì)” 按3等分劃分溉浙，“數(shù)據(jù)列表” 按1等分劃分烫止。
3.2、縱向劃分
縱向劃分以8為基礎(chǔ)間距戳稽，通過(guò) 8px（小號(hào)間距）馆蠕、16px（中號(hào)間距）、24px（大號(hào)間距）這三種規(guī)格來(lái)劃分信息層次惊奇。
在這三種規(guī)格不適用的情況下互躬，可以通過(guò)加減「基礎(chǔ)間距」的倍數(shù)，或者增加元素 ( 分割線 ) 來(lái)拉開(kāi)信息層次颂郎。計(jì)算公式：y = 8 + 8 * n ( n >= 0吼渡，y 是縱向間距)。
「總結(jié)」
在一個(gè)項(xiàng)目中乓序，定義好了模塊布局和典型頁(yè)面布局寺酪，確保整體一致；在通過(guò)搭建好的柵格系統(tǒng)替劈，確奔娜福縱向和橫向元素和區(qū)域的間距的統(tǒng)一。根據(jù)不同的業(yè)務(wù)場(chǎng)景完成的頁(yè)面設(shè)計(jì)在布局和細(xì)節(jié)上也將高度統(tǒng)一陨献，協(xié)作的設(shè)計(jì)師輸出的原型也將如同一個(gè)人的設(shè)計(jì)盒犹。
如果希望用戶在不同分辨率下體驗(yàn)更好，那么項(xiàng)目還需要定義一套適配解決方案。請(qǐng)查看《「交互規(guī)范」響應(yīng)式讓屏幕利用更高阿趁，體驗(yàn)更佳》? 膜蛔，希望對(duì)你有所幫助！２闭蟆皂股！
