6个很棒的 CSS 布局生成器

21-08-14 banq

分享 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

猜你喜欢