網格 PNG：透明背景的參考網格
這裡的網格 PNG 會在透明背景上，依照你指定的像素大小畫出等距的線條。你可以設定欄數、列數、線條粗細與顏色，再把網格下載成 PNG 或 SVG，或複製成 CSS 背景。它適合當作參考圖層，疊在作品、版面或螢幕截圖上。所有處理都在瀏覽器中完成，檔案不會上傳。
透明背景的網格 PNG 怎麼做
網格會直接在頁面上畫出來，只要四個步驟：
- 輸入畫布寬度 (px)與畫布高度 (px)。兩者都可以設定 10 到 5000，起始值是 1920 × 1080。
- 設定欄數（1 到 200，起始值 12）與列數（1 到 200，起始值 6）。
- 設定線條粗細 (px)（1 到 50），並選擇線條顏色。預設是紅色 #FF0000。
- 確認預覽後，按下下載 PNG、下載 SVG或複製 CSS。
沒有套用按鈕。預覽會在你輸入時即時重畫，後面的棋盤格用來顯示檔案中哪些部分是透明的，不會包含在下載的檔案裡。
格子大小由畫布、欄數與列數決定
畫布會被平均分割：每個格子的寬度是畫布寬度除以欄數，高度是畫布高度除以列數。預覽下方的「每個格子是 … × … px」會在你調整數值時顯示結果。想要正方形格子，就選能讓兩個方向大小相同的數字。1920 × 1080 的畫布分成 16 欄、9 列，每個格子是 120 × 120 px。
線條會置中畫在每一條內部分割線上。如果畫布無法整除，線條可能落在兩個像素之間，在 PNG 裡看起來略微模糊。想要清晰的線條，請讓寬度是欄數的倍數、高度是列數的倍數。
常用的網格 PNG 尺寸，以及 Figma 網格以外的做法
常見的尺寸如下（寬 × 高、欄 × 列、格子大小）：
- Full HD 正方形格子：1920 × 1080、16 × 9、120 × 120 px
- 4K 正方形格子：3840 × 2160、32 × 18、120 × 120 px
- 3 × 3 正方形：1080 × 1080、3 × 3、360 × 360 px
- 3 × 3 直式 9:16：1080 × 1920、3 × 3、360 × 640 px
Figma 和 Illustrator 都有各自內建的網格與參考線。需要一個尺寸精確的網格檔案時，就可以用這個頁面。
線條粗細、線條顏色與進階選項
線條粗細是以畫布像素計算的筆畫寬度。畫布很大時，細線需要設定較大的數值，圖片縮小後才看得見。線條顏色欄位會開啟瀏覽器的色彩選擇器，並在旁邊顯示十六進位色碼。請選擇和底圖對比明顯的顏色：深色作品上用白色，淺色作品上用深色。
進階選項裡有三個核取方塊。一般網格只在內部分割處有線，所以檔案邊緣是空的。
- 外框會加上一圈邊框。它畫在畫布邊緣內側，所以能保持完整的線條粗細。
- 中央十字線會通過中心加上一條垂直線和一條水平線。欄數或列數是偶數時，中間本來就有一條線，所以只有奇數時才看得出差別。
- 對角線會加上兩條由角到角的線，在中央交叉。
下載 PNG、下載 SVG 或複製 CSS
下載 PNG 會儲存一張與畫布大小完全相同的透明圖片，檔名像 網格-1920x1080.png。下載 SVG 會把同一個網格存成沒有背景的向量線條，檔名像 網格-1920x1080.svg。複製 CSS 會把一行 background-image: url("data:image/svg+xml,...") 和一行 background-size 放進剪貼簿，讓開發者不用另外準備圖片檔，就能把網格鋪在網頁上。
背景預設會重複排列。如果你要拼貼使用，請記得一般網格在最外緣沒有線。開啟外框時，每個接縫處會有兩條邊框相接，看起來大約是你所設定粗細的兩倍。
要把網格疊在照片上，或需要 CSS 版面程式碼？
如果想在手邊的圖片上畫格線，用格子法來描繪，請使用九宮格與繪圖用的格線工具。如果想設計網頁版面並取得 grid-template-areas 程式碼，請使用 CSS Grid 的專用工具。這個頁面是用來製作空白、透明的網格檔案本身。
常見問題
如何做出透明背景的網格 PNG？
輸入「畫布寬度 (px)」與「畫布高度 (px)」，設定「欄數」與「列數」，選擇「線條顏色」，再按下「下載 PNG」。檔案的背景是透明的，預覽裡的棋盤格只是用來顯示這一點。檔案會以類似「網格-1920x1080.png」的名稱儲存，名稱裡會帶上你自己的尺寸。
要怎麼做 3 × 3 的網格？
把「欄數」設為 3、「列數」設為 3。這會畫出兩條垂直線和兩條水平線，把畫布分成九個相同的格子。如果想在邊緣也加一圈邊框，請在「進階選項」裡開啟「外框」，再按下「下載 PNG」。
9:16 的網格圖片要設定多大？
要做全螢幕直式圖片，請把「畫布寬度 (px)」設為 1080、「畫布高度 (px)」設為 1920。2160 × 3840 是同樣的 9:16 比例，細節多一倍。兩者都在 5000 px 的上限內。預覽下方的文字會顯示單一格子的大小。
要怎麼做白色的疊加網格？
在「線條顏色」選擇白色 #FFFFFF。白線在預覽的棋盤格上可能不容易看清楚，但下載的 PNG 會把它們保留在透明背景上，所以把檔案放到照片或深色版面上時就看得見。
可以輸出成 SVG 嗎？
可以。按下「下載 SVG」，就能把同一個網格存成向量檔，例如 網格-1920x1080.svg。線條是你所選顏色的筆畫，沒有背景填色，所以不論放大多少都很清晰，可以用瀏覽器或任何向量編輯軟體開啟。
如何把網格當成 CSS 背景使用？
按下「複製 CSS」，再把結果貼進樣式規則。你會得到內嵌 SVG 網格的 background-image，以及和畫布大小相同的 background-size。調整 background-size 可以縮放網格，也可以用小畫布讓背景重複排列。沒有開啟「外框」時，每塊拼貼的邊緣沒有線。
如何在 Illustrator 或 Figma 裡加入網格？
兩者都有自己內建的網格與參考線。需要尺寸精確的網格檔案時，再使用這個頁面。在 Illustrator 開啟 SVG，線條會保持向量；也可以把 PNG 當作透明圖層放在作品上方。在 Figma 裡，兩種檔案都能加入框架。
為什麼我的 PNG 在 iPhone 或 iPad 上比較小？
iPhone 和 iPad 上的 Safari 在超過約 1600 萬像素時會回傳空白圖片，所以那裡的 PNG 會縮小到可以容納的大小，並顯示儲存時的尺寸。SVG 一律保留你設定的完整大小，需要精確尺寸時請使用 SVG。
