griddle.it：幫助網頁設計與排版的小工具

griddle.it 是一個可以幫助網頁排版的小工具，讓您在設計版面時可以比較方便的對齊各個網頁元素。

在設計網頁的排版時，通常都會需要控制版面的寬度，並且讓不同元素保持對齊，而 griddle.it 就是一個很簡單的輔助小工具，他可以動態產生一個參考用的背景圖，圖上面會標明各種不同的像素寬度，讓您在設計網頁時，可以更方便掌握不同網頁元素的位置。

名稱：griddle.it
網址：http://griddle.it/

他的效果可以直接從他的 Live Demo 網頁中查看，而其使用方式就是直接以 URL 來指定要產生的背景圖，例如：

http://griddle.it/480-6-15

就表示產生寬度為 480 像素的背景圖，裡面包含 6 欄，欄與欄之間間隔 15 像素，產生的結果就像這樣：

如果要將這個背景圖放進網頁中，只需要加上簡單的 CSS 即可：

body {
  background: url(http://griddle.it/960-12-30) repeat-y center top;
}

欄的顏色也可以自行指定：

http://griddle.it/960-12-30?color=FF00FF
http://griddle.it/960-12-30?color=f0f
http://griddle.it/960-12-30?color=fuchsia

指定背景顏色：

http://griddle.it/960-12-30?background=papayawhip&color=fuchsia

指定文字顏色：

http://griddle.it/960-12-30?text=firebrick

隱藏文字：

http://griddle.it/960-12-30?num=false
http://griddle.it/960-12-30?num=0

指定水平方向的格線：

http://griddle.it/960-12-20?horizontal=30

這樣就會每隔 30 像素畫一條水平線。

如果要一次輸入多個參數，可以用 & 分隔：

http://griddle.it/960-12-30?color=blue&num=false&horizontal=20

讓欄與欄之間沒有間隔：

http://griddle.it/960-12
http://griddle.it/960-12-0

熱門文章