一個 CSS Grid 產生器的替代方案，只接受 1 到 12 的整數、0 到 100 像素之間的間距，以及一組封閉的對齊值，會產生你可以逐行稽核的輸出。許多視覺化的網格工具接受自由文字的欄數、自由文字的 fr 值，或任何對齊字串，然後重新輸出所輸入的內容，這會將使用者控制的文字混入樣式表中。一個有界限的替代方案反轉了這個契約：產生器掌控屬性名稱、單位、選擇器、repeat() 包裹層，以及 minmax() 函式，而你只能選擇有界限的值。結果是一條只包含控制項所顯示內容的 .grid 規則，沒有其他多餘的東西。這種可稽核的產生器適合想要可直接複製的 CSS、不必重新檢查片段中是否夾帶多餘字元、漏掉分號，或被注入宣告的作者。它也適合在將輸出調整為真實的回應式設計之前，需要一個確定性基線的團隊。
產生器完全在瀏覽器中執行，因此在預覽、產生或複製期間，沒有任何片段會離開頁面。內容不會被上傳、保存，或與 Lizely 共享，這讓迭代循環保持快速，並避免任何版面配置工作的隱私審查。這是刻意的權衡取捨：這個工具永遠不會擴展成通用的 CSS 編輯器，而它強制執行的界線，正是輸出值得信賴的原因之一。
為什麼有界限的輸入會改變你對網格產生器的信任方式
大多數線上 CSS Grid 產生器將每個數值欄位都視為自由文字框。你可以輸入 3.5、12px、-2，或尾端空白，工具可能會靜默強制轉型，或將原始字串插入 repeat() 運算式中。這種自由度會產生看似正確，但把假設藏在明處的輸出。有界限的替代方案採取相反的做法：欄與列必須是 1 到 12 之間的十進位整數，間距必須是 0 到 100 像素之間的十進位整數。帶正負號的值、小數、單位、空白填補，以及空欄位，都會在產生任何 CSS 之前以明確的錯誤訊息拒絕，因此片段中絕不會出現一個不是你打字的打錯字。
產生器也在每個數值欄位強制執行 32 個 UTF-16 碼位 (code units) 的上限。貼上過長的字串無法溢位剖析器，也無法夾帶額外的字元。對齊欄位會以封閉列舉 stretch、start、center、end 進行驗證，因此像 `center; position: fixed` 這種刻意構造的值會在產生字串之前被拒絕，即使呼叫者繞過了可見的 select 控制項。實作絕不會從使用者輸入中插入任意的選擇器、屬性、值、URL、註解、大括號或分號。CSS 屬性名稱、標點符號、單位、.grid 選擇器、repeat()、minmax()，以及 fr 權杖，全部都由產生器本身固定。
| 欄位 | 接受 | 拒絕 | 拒絕時的結果 |
|---|---|---|---|
| 欄 / 列 | 1–12 的十進位整數 | 0、13、1.5、"3 "、"3px"、-2、空、超長 | 不產生 CSS；安全的 3×2 預覽預設值 |
| 間距 (px) | 0–100 的十進位整數 | -4、2.5、"16 "、"16px"、空、超長 | 不產生 CSS；安全的 3×2 預覽預設值 |
| justify-items / align-items | stretch、start、center、end | "center; color: red"、"baseline"、"right" | 不產生 CSS；安全的 3×2 預覽預設值 |
可稽核的輸出：產生器實際發出的 CSS
CSS Grid 產生器會輸出一條以 display: grid 開頭的 .grid 規則，這會在套用它的元素上建立網格格式化上下文。接著它會使用 repeat(n, minmax(0, 1fr)) 輸出 grid-template-columns 與 grid-template-rows，其中 n 是你輸入的已驗證整數。repeat() 標記法避免了重複撰寫相同的軌道函式許多次，而 minmax(0, 1fr) 給每個彈性軌道一個零下限，而不是讓過長的 min-content 貢獻把軌道撐得比容器還寬。每個軌道會取得可用空間的一個份額，這是原型與簡單區塊實用的等寬軌道模式。
產生器使用一條以像素撰寫的 gap 宣告，因此行列之間使用相同的間距。0 是有效的，會移除排水溝。產生器刻意將值限制在 100 像素以內，因為它的目的是有界限的視覺化建構工具，而不是任意的 CSS 編輯器；它絕不會把 101 悄悄改為 100。最後，片段會包含你從封閉列舉中選擇的 justify-items 與 align-items 值。
| 值 | 行內軸 (justify-items) | 區塊軸 (align-items) |
|---|---|---|
| stretch | 在項目尺寸允許時填滿行內軸 | 在項目尺寸允許時填滿區塊軸 |
| start | 將項目移向行內起點邊緣 | 將項目移向區塊起點邊緣 |
| center | 將項目置於行內起點與行內終點之間 | 將項目置於區塊起點與區塊終點之間 |
| end | 將項目移向行內終點邊緣 | 將項目移向區塊終點邊緣 |
這些控制項會在項目被指派的區域內對齊；它們不是 justify-content 或 align-content，後者是在較大的容器內對齊整組網格軌道。它們也不會指派個別的 grid-row、grid-column 或 grid-area 位置。align-items 的行為尤其會作用於網格容器的每個直接子元素，除非個別項目將其覆寫。
三個步驟建立一個已驗證的網格
操作流程有三個具體步驟。請依序執行。
- 輸入 1 到 12 的整數欄數與列數，以及 0 到 100 之間的像素間距。超出範圍、帶正負號、小數、空白填補、附加單位、空，或過長的數值文字會產生明確錯誤訊息，且不會產生 CSS。控制項不會在瀏覽器端修剪或夾住你的輸入，因此你看到的值就是剖析器看到的值。
- 從 stretch、start、center 或 end 中選擇 justify-items 與 align-items 的值，然後檢查永遠可見的即時預覽。只要欄位有效，預覽會立即顯示目前的軌道數、間距與對齊值。如果有任何欄位無效，預覽會重設為文件記載的安全三欄兩列預設值，而不是顯示過時或部分解讀的輸入。
- 點擊 Generate CSS，然後複製已驗證的 .grid 規則。如果剪貼簿權限被阻擋，工具會顯示手動複製訊息，並讓程式碼保持可選取狀態。產生後編輯任何控制項會立即移除先前產生的區塊、舊的錯誤訊息，以及舊的複製狀態，因此畫面上的片段永遠反映目前的控制項。
每次非同步複製嘗試都會標記一個產生編號，因此較舊的剪貼簿權限結果無法在 CSS 已變更或元件已關閉後顯示「已複製」。複製狀態會自動清除，其計時器會在編輯或卸載時取消。輸出永遠包含相同的選擇器、相同的屬性順序，以及相同的標點符號，因此兩個開發人員使用相同的設定會看到位元完全相同的片段。
即時預覽、安全預設值與複製行為
即使控制項無效，預覽也永遠存在。它從相同的已驗證設定與共用的軌道序列化器衍生出渲染的軌道與即時預覽樣式，因此預覽與產生的 CSS 不可能出現落差。當所有即時欄位都有效時，預覽會立即顯示目前的軌道數、間距與對齊值。當某個欄位無效時，預覽會退回為文件記載的安全預設值，即三欄兩列，且預覽本身不會顯示任何錯誤文字。編號的範例項目讓儲存格邊界與對齊清晰可見，卻不會洩漏到複製的 CSS 中。
較大的間距或十二乘十二的網格可能會讓範例儲存格變得非常小，或需要在預覽內捲動，但產生的輸出仍會包含你所要求的精確值。預覽高度僅是示範，不是一個會跟著複製的 CSS 一起帶走的宣告。預覽是由與片段相同的 repeat(n, minmax(0, 1fr)) 函式產生，因此你所看見的與你所貼上的，是由同一段程式碼路徑產生。
這個替代方案不涵蓋的部分
這個產生器是個明確的起點，而不是完整的頁面版面配置。它不會建立具名區域、隱含軌道、自動放置控制項、子網格 (subgrid)、masonry、回應式斷點、來源順序變更、跨距，或個別項目的對齊。網格所提供的視覺重排絕不應取代邏輯文件順序，因為鍵盤導覽與輔助技術仍依賴有意義的來源結構。先加入語意化 HTML，再將產生的宣告調整為專案實際的內容與回應式需求。
對大多數實際工作而言，一個明確的網格需要媒體查詢、容器查詢、自動適配模式，或在跨視窗大小應改變軌道數時的替代樣板。minmax(0, 1fr) 給每個軌道一個零下限，減少來自過長 min-content 尺寸造成的溢位，但內容可能仍需要自己的溢位處理。將輸出視為有界限的鷹架：複製它，然後加上真實專案所需的回應式規則、依內容調整的間距，以及無障礙細節。W3C CSS Grid Layout Module Level 2 定義了產生器所依賴的屬性語法，而 grid-template-columns、gap、justify-items 與 align-items 的 MDN 參考資料則跨瀏覽器交叉驗證了實際行為。
若要使用同一系列有界限的建構工具進行更深入的工作，請參考 fr 與 minmax 如何在彈性網格中組合，並探索另一個相關的 聚焦於可稽核輸出的 CSS text-shadow 產生器替代方案。