Griddy 是一款专注于 CSS Grid 布局学习的在线交互式工具，其核心理念是“Learn the CSS Grid Spec”。它通过可视化拖拽与实时代码反馈相结合的方式，将抽象且复杂的 CSS Grid 规范转化为直观易操作的图形界面，帮助开发者尤其是前端新手，快速理解网格系统的运作机制。

网站简介

Griddy 由前端爱好者开发，致力于解决 CSS Grid 学习门槛高、文档枯燥的问题。与传统的文档阅读不同，Griddy 提供了一个可交互的网格画布，用户可以通过鼠标拖拽、点击等方式直接操作网格容器和网格项，并即时看到对应的 CSS 代码变化。这种“所见即所得”的模式，让学习者能够将抽象属性与视觉表现一一对应，大大降低了理解成本。

网站界面简洁，左侧为操作区域，右侧为实时生成的 CSS 代码，用户操作时代码同步更新，同时也可以通过修改代码反向驱动界面，双向联动。Griddy 覆盖了 Grid 布局中的关键属性，包括 display: grid、grid-template-columns、grid-template-rows、grid-gap、justify-items、align-items、justify-content、align-content 等，并支持通过可视化方式设置网格线的命名与区域划分。

主要功能/内容

1. 可视化网格编辑器

用户可以直接在画布上拖拽网格线调整列宽和行高，改变网格轨道大小，也可以自由移动网格项的位置，体验 grid-column 和 grid-row 属性对项目定位的影响。所有操作都会自动转换成简洁的 CSS 代码，方便用户复制学习。

2. 实时代码预览

编辑区右侧显示着当前网格布局对应的完整 CSS 代码，包括容器属性和项目属性。代码高亮清晰，用户修改任意数值或拖拽元素时，代码会立即刷新，帮助理解每条声明的作用。

3. 属性速查与示例

Griddy 针对每个 CSS 属性提供了可视化示例和简要说明。比如设置 grid-template-columns: repeat(3, 1fr) 时，画布会显示三列等宽布局，并标记出 1fr 的实际含义；调整 gap 时，网格间距会动态变化。这种直观反馈远比死记硬背属性值更有效。

4. 交互式学习路径

网站按由易到难的顺序设计了一系列交互练习，从创建第一个 Grid 容器到复杂的网格嵌套，使用户在完成任务的同时逐步掌握所有知识点。每个练习都附带明确的提示和最终目标，学习过程充满成就感。

特点说明

• 直观高效：用图形代替文字描述，拖拽代替记忆，学习效率成倍提升。
• 零成本使用：无需安装或注册，打开浏览器即可开始学习，所有功能免费开放。
• 代码友好：生成的代码符合标准规范，可直接用于真实项目，不仅是学习工具更是开发助手。
• 双向联动：既可以通过操作界面生成代码，也可以手动修改代码观察界面变化，适合不同习惯的学习者。
• 聚焦核心：网站内容紧扣 CSS Grid 规范，不掺杂无关信息，让学习者集中精力攻克重点。

总而言之，Griddy 是一个小而精的 CSS 学习利器，它打破了传统文档学习的枯燥模式，通过互动和视觉化让复杂的布局系统变得易于掌握。无论是初学前端的新手，还是想巩固 Grid 基础知识的开发者，都能从中获得高效且有价值的学习体验。