CSS 工作流程
CSS Grid 區塊：視覺版面、軌道與原始碼順序
CSS Grid 能將內容放進命名區域。視覺地圖方便描繪版面；真正的尺寸與閱讀順序，仍取決於 HTML 和內容。
內容更新： · 維護者與修正回報
每個區塊都要是完整矩形
grid-template-areas 每個引號中的列，格數都必須相同。相鄰格子重複名稱即可跨欄或跨列；句點代表未命名格。同名區域必須形成單一完整矩形，L 形或分離區塊會讓宣告無效。
編輯器以矩形保存區塊並拒絕重疊，不解析任意 CSS。名稱採有限制的小寫識別字，讓產生的 CSS 與 HTML 可預期。
分開理解軌道與間距
欄與列是軌道。fr 分配可用空間、px 固定尺寸、auto 依內容調整，minmax(0, 1fr) 則移除彈性軌道的自動最小值。結果仍受容器、實際內容和其他樣式影響。
編輯器的方格地圖只表示區塊位置。實際預覽把產生的軌道、區塊與間距套用到範例卡片；卡片另有示範用外觀，複製的版面 CSS 不會設定其字級、內距或內容。改變預覽容器寬度也不會產生 media query。
讓 HTML 順序符合內容意義
Grid 配置改變畫面位置，不會改變文件順序。螢幕閱讀器與鍵盤導覽依 HTML 順序前進。產生器先按畫面由上到下、由左到右輸出區塊，但實際內容未必適合這個閱讀順序。
發布前，先在不套用 CSS 時閱讀 HTML，再以 Tab 走過互動內容，並在窄螢幕與 200% 縮放下重試。讓標題與控制項本身有合理順序，不要靠視覺配置或正數 tabindex 補救。
了解編輯器界線
編輯器只處理一個格線，最多八欄、八列與十六個命名區塊。軌道尺寸支援結構化的 fr、px、auto 與 minmax(0, fr)，間距支援 0–128px 整數。這些是工具範圍，不是 CSS 規格上限。
工具不產生響應式斷點、巢狀格線、subgrid、masonry，不匯入任意 CSS，也不儲存專案。請把輸出作為版面起點，在目的網站測試溢出、內容增長、閱讀順序與瀏覽器支援。
.layout {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-areas:
"header header"
"sidebar main";
}
.layout > .header { grid-area: header; }資料可信度