分享 6 个很棒的 CSS 布局生成器/工具，它们将帮助您为您的项目快速制作 CSS 布局的原型和前端开发。我希望您会发现它很有用，并将其添加为书签，以便您将来可以轻松参考。
1. Layoutit 的交互式 CSS 网格生成器
快速设计 Web 布局，并获取 HTML 和 CSS 代码。使用此交互式 CSS 网格生成器直观地学习 CSS 网格并构建 Web 布局。
链接：grid.layoutit.com
2. CSS 布局
使用 CSS 制作的流行布局和模式。零依赖。没有框架。没有 CSS 黑客。真实用例。良好做法。您可以选择一个模式，它包含与该模式相关的所有代码，我们可以将其复制粘贴到我们的项目中。
链接：csslayout.io
3. 网格
通过使用各种单位设置列数和行数，轻松创建 CSS 网格布局。我们还可以设置列和行间距，并在底部查看生成的代码，我们可以将其复制粘贴到我们的项目中。它不支持添加grid-template-areas或grid-area喜欢 Layoutit 站点，但它仍然是一个非常有用的工具。
链接：griddy.io
4. Masaya Kazama 的 CSS 网格布局生成器
这个布局生成器有两个很棒的预设：Holy Grail& Article List，我们可以根据我们的要求进行可视化修改，所有的 HTML 和 CSS 代码都是为我们生成的。它还支持网格区域，非常酷。
链接：vue-grid-generator.netlify.app
5. CSS Grid Generator by Sarah Drasner
适合所有人的小工具。您可以指定行、列、间隙和单位，然后拖动创建子div，轻松制作动态布局！
链接：cssgrid-generator.netlify.app
6. Bootstrap 4 界面生成器
LayoutIt 的另一个很棒的网站帮助我们快速拖放 Bootstrap 4 网格系统、基本 CSS 元素、组件等，并使用这个交互式 Bootstrap 4 界面生成器构建 Web 布局。
链接：layoutit.com/build