5 個有用的 CSS 佈局生成器

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

翻譯 | 楊小二

有效的佈局不僅使你的網站具有吸引力，而且會使你的網站更加友好和吸引人。網站的佈局清除了網頁內導航的路徑，並將網站最重要的元素放在前面和中間。包含很有用的網格，因爲它們有助於佈局設計。下面我們列出了一些有助於生成 CSS 佈局工具的網站。

1、 cssgr.id

地址 : https://cssgr.id/

如果你是前端開發人員，這是一個非常有用的網站。你可以首先指定所需的行數和列數，或者在給定的選項中進行選擇，然後爲其生成代碼。這使你可以專注於設計的其他方面而不是佈局。

2、csslayout.io

地址 : https://csslayout.io/

有多種選擇可供選擇，這個網站是一個隱藏的寶石。有 102 種模式可供選擇，這讓我們的工作更輕鬆，令人讚歎。如果你是前端開發人員，你一定要看看這個網站，你會對可用的選項範圍感到驚訝。

3、Loading.io

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

Flexbox 現在非常有用，但有時再次測試時，它的一些屬性會很令人沮喪。CSS Flexbox 佈局功能強大而複雜。所以這裏有一個快速的 flexbox 遊樂場，用於使用 flex 佈局技巧測試你的 CSS。

4、CSS grid-generator

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

使用這個網站，你可以設置數字、列和行的單位，它會爲你生成一個 CSS 網格！在框內拖動以創建放置在網格內的 div。

5、grid. layout

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

網站上提供了默認佈局，可以根據我們的需要進行修改並生成代碼。用戶可以更改行數、列數、行間距、列間距等，也可以指定對齊方式。

總結

就個人而言，如果你是初學者，請嘗試使用這些網站在一些幫助下自己編寫代碼，而不僅僅是複製粘貼它們。下次你開發漂亮的網站時，希望你利用這些工具網站並享受設計的樂趣。

感謝你的閱讀，快樂編程！

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/793usArrYP8171ibFBFazg