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