隨著業務的不斷推進，現在我們的后臺項目越來越多。但是由于前端和后臺之間聯調復雜導致項目經常會推遲。為了能優化項目流程，提高開發效率。交互和前端決定一起做一套DPL，做一系列的規范出來。這樣可以減少交互，前端，后臺互相的溝通成本，同時能夠沉淀下這段時間大家的收獲。
交互參與的DPL中我們主要是做柵格體系，控件體系，視覺體系，下面我來和大家分享下DPL中的柵格體系設計
柵格
研究網頁柵格系統前，來看一組數據：
| 網站 | 首頁頁面寬度 px |
| Yahoo! | 950 |
| 淘寶 | 950 |
| MySpace | 960 |
| 新浪 | 950 |
| 網易 | 960 |
| Live Search | 958 |
| 搜狐 | 950 |
| 優酷 | 960 |
| AOL | 960 |
| 上面列舉的都是Alexa全球排名前100的站點，它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點有個共同特點：頁面結構較復雜，都可以認為是門戶型網站。
再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點，它們的首頁寬度沒什么固定規律，共同的特點是：功能專一，頁面結構相對簡單。
根據上面的簡單分析可以認為：當搭建頁面結構復雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px。
這是一件很有趣的事情，為什么要選擇這個寬度呢?這個寬度值究竟有什么魔力?
上面的"自然"出現，細究自然是不讓人信服的。設計者們在沒有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數，自然另有奧妙。
那么如何設計一個柵格系統?接下來我們將通過實例，詳細的介紹一下網頁柵格系統的原理與應用：
在網頁設計中，我們把寬度為"W"的頁面分割成n個網格單元"a"，每個單元與單元之間的間隙設為"i",此時我們把"a+i"定義"A"。他們之間的關系如下：
W =(a×n)+(n-1)i
由于a+i=A，
可得：(A×n) – i = W
