Griddy 是一款專注于 CSS?Grid 布局的可視化編輯工具，幫助用戶快速創建、調試和預覽網格布局。

Griddy官網入口網址：https://griddy.io/

主要功能

• 交互式網格編輯：實時設置 grid-template-columns、grid-template-rows、列/行間距、對齊方式等屬性。
• 即時代碼生成：根據用戶的配置自動生成對應的 CSS 代碼，便于直接復制使用。
• 實時預覽：在編輯面板中即時展示布局效果，幫助快速調試和優化。

服務內容

• 網格配置面板：支持添加、刪除、修改列/行數量和尺寸（包括單位）。
• 代碼展示：提供完整的 CSS 代碼片段，包括 grid-template-columns、grid-template-rows、column-gap、row-gap、justify-items、align-items 等屬性。
• 學習與實驗：為學習 CSS?Grid 的用戶提供直觀的實驗環境，幫助理解網格概念。

目標用戶

• 前端開發者、網頁設計師以及需要快速構建響應式網格布局的技術人員。
• 學習 CSS?Grid 的學生和愛好者，提供可視化的實驗與學習平臺。

Griddy 通過直觀的 UI 把抽象的 CSS?Grid 語法轉化為可操作的圖形，讓開發者和設計師都能更高效地構建現代響應式布局。