製作的 Responsive Web 最好能先理解 Grid 概念。這概念不只運用在 Mobile Web ，包含 Smart TV 都會派上用場。如果你輕鬆想做出和 Mockup 相同的 Web ，最好把 Grid 學起來。
這篇講文章的非常清楚，從 Wireframe、Mockup、Html 全都包了：Using the 960 Grid System as a Design Framework ，網路上也有很多講解Grid的文，所以在這裡我只教你「怎麼拉線」做 Mockup。光拉線就是一門學問了，先學會 Grid 概念才能套用如 Susy、Bootstrap 這類型的框架加速產出 Respinsive Web。
GrideGride
官方下載：http://guideguide.me
這是個 Free 的好用PS外掛，輸入數值就會自動畫參考線。在做 Responsive Web 之前請先將參考線全部拉出來。至於如何安裝和操作方式，網路上很多人寫了，可以參考這裡：Photoshop外掛－GUIDEGUIDE 畫面參考線等分產生器
Velositey
免費的PS外掛，Velositey
，支援一鍵生成 Grid，其他功能類似 WabZap，只是沒那麼精緻。
安裝方式：
1.Place ‘Velositey’ folder in ‘Adobe Photoshop CC/Plug-ins/Panels’
2.Launch Photoshop CC
3.In Photoshop, go to ‘Window > Extensions > Velositey’
WebZap
官方下載：http://webzap.uiparade.com
付費軟體，非常好用，之前在 初學者的 Mockup
這篇文有出現過。光是看它產出的動作就有爽度，有種「喔喔喔～～它自動在跑了耶、不用我自己拖拉個半天耶～好厲害啊！」的心情。
上述 3 款我都用過一陣子，各有利弊看各人喜好，用途不太一樣。當然付費軟體細節上比較優。（個人支持 WebZap，錢都噴了當然要推別人下坑。）
Grid
我用 WebZap 當示範，自動產出這樣的 Grid 格線。
從圖中很清楚可以看到分成紅、綠、藍、透明等幾個區塊，真正的內容區域只到左右兩邊的綠色而已。
Column 欄
紅色，目前常見的大多切分成 12 格，當然也可以分成各種格數，但若要套用框架還是照大家常用的數值來做吧。
Gutter 間隙
透明，欄和欄之間的間距。
Grid padding 留白
綠色，主要文本和邊緣的間距。
藍色
這區塊不在 Grid 計算內，但還是要設計喔！當螢幕持續拉伸，比如超大寬螢幕，不能夠把整塊主內容區也跟著拉大，文本圖片都會變形。當 Web 尺寸寬到一定程度時，還會持續左右展延的就只有藍色區塊。
整個頁面的寬度等於 欄＋間隙＋留白，藍色區塊不算在內喔！
欄、間隙、留白的數值沒有固定，比如下方這 3 種都不太一樣。
- 960 Grid 欄 60px、間隙 20px、留白 10px，頁面寬度 960px。
- WebZap 欄 60px、間隙 20px、留白 30px，頁面寬度 1000px。
- Velositey 欄 65px、間隙 30px、留白 30px，頁面寬度 1170px。
如果是Smart TV 的 Grid，16:9 情況下甚至沒有 Gutter 和 Grid padding，只有 Column，而且切分成 16 格，且在特定總寬下固定欄位尺寸。
這種情況下我會套用 Susy 框架，彈性比 Bootstrap 大！想切幾格、間距、留白等等都能自由發揮。之後的文章會說明照著 Grid 畫好 Mockup 後，在 Susy 和 Bootstrap 要怎麼設定。（我也只知道這 2 種怎麼操作，其他的不熟XD）
