CSS Grid Builder

cssgrid.cc

在线可视化生成 CSS Grid 布局代码的工具，无需手写 HTML，通过拖拽添加元素并调整网格规则。

免费HTML/CSS网页

被推荐 1 次

访问网站 ↗

适合做什么

适合前端开发者和网页设计师快速搭建和调试 CSS Grid 布局，学习网格规则。

标签与属性

授权

技术栈

平台

谁在推荐

@goabstract/Awesome-Design-Tools · awesome 列表出处 ↗

CSS Grid Builder — with this tool there is no HTML part to the grid. The grid only becomes apparent when content (elements) are added and positioned according to the grid rules. ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)

同类推荐

无代码建站

CodePen

在线前端代码编辑器与社区，支持 Sass、TypeScript、Vue 等，可实时预览、分享和部署网站。

免费+付费HTML/CSSVue

codepen.io2 处推荐详情

无代码建站

Webflow

可视化无代码建站平台，可在浏览器中设计响应式网站并托管，内置 CMS 与 AI 搜索优化。

HTML/CSS落地页SaaS作品集博客

webflow.com2 处推荐详情

AI 生成 UI

v0 by Vercel

Vercel 推出的 AI 生成 UI 工具，用文字或图片提示快速生成可用的全栈 Web 应用界面。

免费+付费ReactNext.jsTailwind落地页

v0.dev1 处推荐详情

AI 设计助手

Framer

面向设计师的无代码建站与原型工具，内置 AI 设计代理，可直接在画布上生成、编辑并发布网站。

落地页作品集SaaS

framer.com5 处推荐详情

组件库

GrapesJS

开源的多用途可视化网页构建框架，可嵌入应用实现拖拽式编辑并导出干净 HTML。

开源HTML/CSS落地页邮件SaaS

grapesjs.com1 处推荐详情

无代码建站

Plasmic

开源可视化建站与内容平台，可与现有代码库集成，支持从 Figma 导入并生成 React 代码。

开源React落地页SaaS后台

plasmic.app1 处推荐详情