跳至主要內容
Lizely

CSS 網格生成器

建立具有明確欄位、行、間距及項目對齊的 bounded CSS 網格，即時預覽，並複製符合標準的宣告。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.請輸入從 1 到 12 的整數欄與行數，以及從 0 到 100 的像素間距。
  2. 2.選擇 justify-items 與 align-items 值，然後檢視始終可見的即時預覽。
  3. 3.產生驗證過的 .grid 規則並複製 CSS，或若剪貼簿權限被阻擋則手動選擇。

關於CSS 網格生成器

CSS 網格產生器會建立一個小型、明確的二維佈局，無需記憶每個屬性或手動輸入重複的 track 值。輸入從一到十二列、一到十二行，以及從零到 100 像素的間距。選擇項目在內聯軸對齊的方式（使用 justify-items），以及在區塊軸對齊的方式（使用 align-items）。預覽視窗會在你工作時持續顯示，成功產生後會產生完整的 .grid 規則，可以複製到樣式表中。所有產生與預覽動作皆在瀏覽器本機端執行。

輸出以 display: grid 開始，建立網格格式化上下文，接著使用 grid-template-columns 與 grid-template-rows 來定義軸向，使用 repeat(n, minmax(0, 1fr))。repeat() 語法避免重複輸入相同的軸向設定。每條軸獲得可用空間的一份，而 minmax(0, 1fr) 會讓彈性軸的最小值為零，而非以 min-content 的長度強制擴大軸向，導致超出容器範圍。此為實用的等距軸向模式，但並不能自動讓佈局適應不同視窗大小。作者仍應加入媒體查詢、容器查詢、自動適應模式或替代模板，以應對視窗尺寸改變時軸向數量的變化。

間距宣告使用一像素長度，因此行與欄之間的間距相同。零值有效，可移除邊距。產生器刻意將值限制在 100px，因為其用途是作為一個有界視覺建構工具，而非任意的 CSS 編輯器。它絕不會自動將 101 轉換為 100。超出範圍、負數、小數、空白填充、單位附加、空值或過長的數值輸入會產生明確錯誤，且不會產生任何 CSS。僅接受精確的範圍：一至十二條軸，以及零至 100 像素的間距。

justify-items 控制每個網格項目如何在其網格區域內沿著行軸進行對齊。align-items 則提供沿著塊軸的預設對齊方式。這個工具為每個屬性提供四種廣泛實用的閉合值：stretch、start、center 和 end。stretch 在項目尺寸允許的情況下會填滿相關軸。start 和 end 會將項目移向對應的邊緣，而 center 則會將項目置於兩邊緣之間。這些控制項用來對齊項目在其分配的區域內；它們並不是 justify-content 或 align-content，後者是將網格軌道作為一個整體在較大的容器內進行對齊。它們也不會為每個網格行、網格列或網格區域指定個別的放置方式。

安全性基於確定性，而非逃逸任意文字。欄位數、行數與間距均透過嚴格的整數驗證。對齊選項必須精確對應四個內部列舉值之一。CSS 屬性名稱、標點符號、單位、選擇器、repeat()、minmax() 與 fr 程式碼均由實作固定。若輸入如 'center' 後接其他宣告的值，將在字串產生前被拒絕，即使使用者跳過視覺選擇控制元件。不會從使用者輸入中插入任意選擇器、屬性、自訂值、URL、註解、花括號、分號或樣式表片段。

預覽始終存在。當所有即時欄位皆有效時，會立即顯示目前的軌道數、間距與對齊值；若任一欄位無效，預覽將重設為檔案中記載的安全三欄二行預設值，而非顯示過時或部分解析的輸入內容。預覽僅使用帶編號的樣本項目來讓格線邊界與對齊更清晰可見。其固定高度與受限框格僅為示範用途，並非包含在複製的 CSS 中。過大的間距或十二乘十二的格網可能導致樣本格子過小，甚至需要捲動；但輸出內容仍會精確保留所請求的值。

產生的程式碼僅在成功執行 Generate CSS 後才會出現。修改任一控制項會立即移除先前產生的區塊、舊錯誤以及舊的複製狀態。複製功能使用瀏覽器剪貼簿 API。每次非同步複製嘗試都會附帶一個產生編號，因此較舊的權限結果無法在 CSS 更新或元件關閉後顯示「已複製」。若剪貼簿被阻擋，將顯示手動複製提示，並保留程式碼可選狀態。複製狀態會自動清除，且在編輯或解除安裝時會取消計時器。不會將任何產生的片段傳送至 Lizely 或由工具儲存。

屬性語法與行為依附於 W3C CSS Grid Layout Module Level 2 指南，該指南定義了網格容器、明確的列與行軌道、repeat()、彈性 fr 尺寸、間距與網格項目對齊方式。MDN 頁面獨立交叉驗證 grid-template-columns、gap、justify-items 與 align-items 與實際語法與瀏覽器檔案。八組可執行的黃金組合涵蓋最小值、最大值、非對稱網格、所有提供的對齊值與代表性間距。測試同時拒絕 CSS 擬態字串、不支援的列舉值、小數、符號、單位、空白字元與過長輸入。

請將結果視為一個清晰的起點，而非完整的頁面佈局。產生器不會建立命名區域、隱式軌道、自動置放控制、子網格、拼圖佈局、響應式斷點、來源順序改變、跨距或每個專案對齊。視覺網格重新排序永遠不可取代邏輯文件順序，因為鍵盤導航與輔助技術仍依賴有意義的來源結構。請先加入語義 HTML，再根據專案實際內容與響應需求調整產生的宣告。

方法與來源

嚴格解析三個原始文字欄位，不進行修剪或瀏覽器端的限制：列與行必須來自 1 到 12 之間的十進位制整數，間距必須來自 0 到 100 之間的十進位制整數。拒絕任何超過 32 UTF-16 位元組單位的欄位。驗證 justify-items 和 align-items 對應封閉的 enum stretch、start、center、end。使用 repeat(n, minmax(0, 1fr))、px 間距以及驗證過的 enum 值產生固定宣告。從相同的驗證過的配置與共用的 track 序列化器匯出產生的 CSS 和即時預覽樣式，當原始輸入無效時，則回退至檔案中說明的安全預設值。每次編輯時清除輸出、錯誤、複製狀態與複製計時器；使用工作、計時器識別與存活參考來保護非同步剪貼簿完成。

常見問題

這個 CSS 產生器會產生什麼？
它會建立一個 .grid 規則，包含 display: grid、明確重複的列與行軌道、一個 px 間距、justify-items 與 align-items。
為何每個軌道使用 minmax(0, 1fr)？
它會創造等量的彈性軌道，同時允許其最小值降至零，可減少因 min-content 尺寸導致的溢位問題。內容仍可能需要自行處理溢位情況。
我可以貼上任意的 CSS 值或宣告嗎？
不可以。數值欄位僅接受範圍內的整數小數，對齊欄位僅接受 stretch、start、center 或 end。所有其他 CSS 的文字皆由生成器固定。
這會自動產生一個響應式的生產佈局嗎？
不會。它僅產生一個明確的網格。若軌道數量需根據可用空間調整，應額外加入媒體查詢、容器查詢或其他模板。

相關工具

開發者工具 使用指南

查看全部