網路上有很多免費的網頁模板可供下載，套用的方式也不複雜，但如要修改其中的版型結構，可能就有點門檻，而我們比較常見的網頁布局有表頭、內容可能區分三、二及單欄式再加上表尾，但不論利用何種版型，如要套用模板，就需要找到相類似的模板，不然就是自己改，太麻煩了。Grid-Generator 這個網站可以讓我們用所見及所得的方式，視覺化的操作網站結構分割、合併、增加、減少、調整區塊大小等，到最後產生該網頁版型的 CSS 樣式表，讓你不論用何種的網頁開發工具，都能輕鬆靈活的套用該 CSS，加快生產力。
Grid-Generator 網站資訊
如何使用 Grid-Generator？
1.使用瀏覽器進入 Grid-Generator 網站，可見到預設的版型，且每一區塊旁邊都有一數字與+、- 圖示按鈕。
2.透過數字的調整，可以改變區塊的寬、高；透過+、-的隨意增加區塊，透過區塊內的[ Split ]可分裂相同位置區塊，也可以選取要合併的區塊後，按[ Combine ]來合併，點擊區塊中的名字，可以改變其 Css 內的命名。
※右側隨時都會修改過後的 CSS 與 HTML 碼，隨時都可以讓你做後續的應用。