首頁線上工具開發工具

Grid-Generator 可自訂網頁結構的版型產生器

Grid-Generator 可自訂網頁結構的版型產生器

網路上有很多免費的網頁模板可供下載，套用的方式也不複雜，但如要修改其中的版型結構，可能就有點門檻，而我們比較常見的網頁布局有表頭、內容可能區分三、二及單欄式再加上表尾，但不論利用何種版型，如要套用模板，就需要找到相類似的模板，不然就是自己改，太麻煩了。Grid-Generator 這個網站可以讓我們用所見及所得的方式，視覺化的操作網站結構分割、合併、增加、減少、調整區塊大小等，到最後產生該網頁版型的 CSS 樣式表，讓你不論用何種的網頁開發工具，都能輕鬆靈活的套用該 CSS，加快生產力。

🔔 不錯過任何精彩！ 立即訂閱我們的 LINE 官方帳號

每次發佈新文章時，您將會第一時間收到本站文章連結通知，輕鬆掌握最新資訊！

使用 LINE 追蹤文章更新

§相關文章，還可以參閱：

如何使用 Grid-Generator？

1.使用瀏覽器進入 Grid-Generator 網站，可見到預設的版型，且每一區塊旁邊都有一數字與+、- 圖示按鈕。

Grid-Generator 可自訂網頁結構的版型產生器

2.透過數字的調整，可以改變區塊的寬、高；透過+、-的隨意增加區塊，透過區塊內的[ Split ]可分裂相同位置區塊，也可以選取要合併的區塊後，按[ Combine ]來合併，點擊區塊中的名字，可以改變其 Css 內的命名。

Grid-Generator 可自訂網頁結構的版型產生器

※右側隨時都會修改過後的 CSS 與 HTML 碼，隨時都可以讓你做後續的應用。