Griddy 是一款專注于 CSS?Grid 布局的可視化編輯工具，幫助用戶快速創(chuàng)建、調(diào)試和預(yù)覽網(wǎng)格布局。

Griddy官網(wǎng)入口網(wǎng)址：https://griddy.io/

主要功能

• 交互式網(wǎng)格編輯：實(shí)時(shí)設(shè)置 grid-template-columns、grid-template-rows、列/行間距、對齊方式等屬性。
• 即時(shí)代碼生成：根據(jù)用戶的配置自動(dòng)生成對應(yīng)的 CSS 代碼，便于直接復(fù)制使用。
• 實(shí)時(shí)預(yù)覽：在編輯面板中即時(shí)展示布局效果，幫助快速調(diào)試和優(yōu)化。

服務(wù)內(nèi)容

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

目標(biāo)用戶

• 前端開發(fā)者、網(wǎng)頁設(shè)計(jì)師以及需要快速構(gòu)建響應(yīng)式網(wǎng)格布局的技術(shù)人員。
• 學(xué)習(xí) CSS?Grid 的學(xué)生和愛好者，提供可視化的實(shí)驗(yàn)與學(xué)習(xí)平臺(tái)。

Griddy 通過直觀的 UI 把抽象的 CSS?Grid 語法轉(zhuǎn)化為可操作的圖形，讓開發(fā)者和設(shè)計(jì)師都能更高效地構(gòu)建現(xiàn)代響應(yīng)式布局。