5个有用的 CSS 布局生成器

一时失言乱红尘 2022-09-04 12:47 245阅读 0赞

![2ddc40a90d6b3c39c1122cdac5de6e6a.png][]

英文 | https://medium.com/@jenisharoshan/helpful-css-layout-generators-b7a48d4dc16f

翻译 | 杨小二

有效的布局不仅使你的网站具有吸引力，而且会使你的网站更加友好和吸引人。网站的布局清除了网页内导航的路径，并将网站最重要的元素放在前面和中间。包含很有用的网格，因为它们有助于布局设计。下面我们列出了一些有助于生成 CSS 布局工具的网站。

**1、 cssgr.id**

地址 : https://cssgr.id/

![9c88fe5c1208d0365c767667b917ee71.png][]

如果你是前端开发人员，这是一个非常有用的网站。你可以首先指定所需的行数和列数，或者在给定的选项中进行选择，然后为其生成代码。这使你可以专注于设计的其他方面而不是布局。

**2、csslayout.io**

地址 : https://csslayout.io/

![c36dce2cb9976d5f92225de8dffd91da.png][]

有多种选择可供选择，这个网站是一个隐藏的宝石。有 102 种模式可供选择，这让我们的工作更轻松，令人赞叹。如果你是前端开发人员，你一定要看看这个网站，你会对可用的选项范围感到惊讶。

**3、Loading.io**

地址 : https://loading.io/flexbox

![3a76cfd83b60bf133c0bdb9dec890099.png][]

Flexbox 现在非常有用，但有时再次测试时，它的一些属性会很令人沮丧。CSS Flexbox 布局功能强大而复杂。所以这里有一个快速的 flexbox 游乐场，用于使用 flex 布局技巧测试你的 CSS。

**4、CSS grid-generator**

地址 : https://cssgrid-generator.netlify.app/

![88ac7c2d5ee94f98c7e5dbd7c3064534.png][]

使用这个网站，你可以设置数字、列和行的单位，它会为你生成一个 CSS 网格！在框内拖动以创建放置在网格内的 div。

**5、grid. layout**

地址 : https://grid.layoutit.com/

![02b5b59d61a79f9033f1c7d93e75f99d.png][]

网站上提供了默认布局，可以根据我们的需要进行修改并生成代码。用户可以更改行数、列数、行间距、列间距等，也可以指定对齐方式。

**总结**

就个人而言，如果你是初学者，请尝试使用这些网站在一些帮助下自己编写代码，而不仅仅是复制粘贴它们。下次你开发漂亮的网站时，希望你利用这些工具网站并享受设计的乐趣。

感谢你的阅读，快乐编程！

#  #

**学习更多技能**

**请点击下方公众号**

![d52ccbfc6fa1fbc8665364faf6889d80.gif][]

![1c49db29e288fa3c149a06a51498d2af.png][]

![617ecb18f4b2e561e1c09bc206622fd3.png][]

[2ddc40a90d6b3c39c1122cdac5de6e6a.png]: /images/20220829/8cb33c0fb0e54fbc9c1c8a85d35d58a5.png
[9c88fe5c1208d0365c767667b917ee71.png]: /images/20220829/25a5492dad284b29ab8db890aafff113.png
[c36dce2cb9976d5f92225de8dffd91da.png]: /images/20220829/e2ebe458c3674d7b87949beb6efedb6a.png
[3a76cfd83b60bf133c0bdb9dec890099.png]: /images/20220829/b7171ffc862c492694cd1b14cad0ce7f.png
[88ac7c2d5ee94f98c7e5dbd7c3064534.png]: /images/20220829/62a06a10f018456289e1b7d78d2a8801.png
[02b5b59d61a79f9033f1c7d93e75f99d.png]: /images/20220829/49d7ad2a43ea4a1bb7b085736ec21615.png
[d52ccbfc6fa1fbc8665364faf6889d80.gif]: /images/20220829/2074bf33cc574c0a924637e264cebe7d.png
[1c49db29e288fa3c149a06a51498d2af.png]: /images/20220829/e61ef05fc225412fa0b1d364620aba69.png
[617ecb18f4b2e561e1c09bc206622fd3.png]: /images/20220829/4392ce5ffdee4df291ebcd7a55f14496.png