請注意，這不是單純把 CSS Grid 設定視覺化，而是把複雜的 2D 版面控制，轉化為 WordPress 設計師可直接拖拉、調整及理解的工作介面
　
對 WordPress 網站設計而言，這是 Divi 5 從 欄位式 (Page Builder) 邁向更成熟、編輯式版面系統的重要一步
　
CSS Grid Editor 讓複雜版面真正可視化，Elegant Themes 於 2026 年 7 月推出 Divi 5 的 CSS Grid Editor。解決過往使用 CSS Grid 時最常見的痛點，設計師們明明知道想要的版面，卻要在大量欄位、行距、跨欄規則與 Offset 設定中反覆嘗試
　
▌新的 Grid Editor 將容器的 Grid 設定與 Offset 規則以視覺方式呈現，使用者可直接拖曳模組到不同格位、拉伸四角控制點讓元素橫跨多行或多欄、拖動調整欄寬、列高與水平 / 垂直間距，即使是較複雜的不對稱編排，也可在畫面中理解每一條規則影響哪個項目
　
📌 最值得注意的技術設計是，Divi 將 Grid 版面規則儲存在父層容器 (Container)，並以 pseudo-class 針對 Grid 內的項目套用位置規則，而非直接修改子元素
　
▌換言之，建立好版面後，內容卡片可新增、刪除、複製，甚至接入 Loop Builder 的動態文章、產品或作品集資料，版面仍會自動依規則排列。這特別適合雜誌式文章列表、Bento Grid 作品集、WooCommerce 商品展示及不規則資訊卡設計