6個很棒的 CSS 佈局生成器

banq發表於2021-08-14
CSS

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

相關文章