📐
css layout generator,
Flexbox/Grid 佈局產生器
透過直覺的圖形介面輕鬆產生 Flexbox 與 CSS Grid 佈局。
您可即時調整各項屬性、預覽排版變化，並一鍵匯出 CSS 程式碼。
📐
Flexbox
適合一維佈局產生
⊞
CSS Grid
適合二維網格佈局
⚡
即時預覽
邊調邊看，所見即所得
預設佈局
產生器設定
📐 視覺化預覽拖曳虛線框底部可調整高度
產生的程式碼
about,
📖 關於本工具
這是一個可以直覺操作的線上視覺化工具，讓您能夠透過 GUI 輕鬆設計並產生 CSS Flexbox 及 Grid 佈局。完全不需要手寫複雜的屬性，透過滑桿、輸入框及下拉選單即可搞定。
工具同時支援 Flexbox (控制如 justify-content、align-items、flex-wrap 等) 與 CSS Grid (控制如 grid-template-columns、gap 等)。您可以在調整的同時，從右側即時預覽排版結果。
所有的處理作業都在瀏覽器端完成，不會將任何資料或設定傳送到外部伺服器，安全且快速。
howto,
🔰 使用方法
1
選擇佈局模式
從頂部的標籤選擇「Flexbox」或是「CSS Grid」，您也可以直接點選快速「預設佈局」來建立基礎框架。
2
調整屬性與項目
利用控制面板調整容器的屬性，或切換到「項目 (Items)」分頁針對個別區塊調整 flex-grow、grid-column 等細節，並在右側查看即時變化。
3
複製與套用程式碼
滿意預覽結果後，點擊下方的「複製程式碼」按鈕，即可將 CSS 或 HTML 程式碼直接貼到您的專案中運用。
glossary,
📚 名詞解釋
- Flexbox (彈性盒子佈局)
- CSS3 的佈局模組。非常適合處理一維 (單獨的橫列或直行) 的項目排列，最常應用在導覽列、按鈕群組或是簡單的卡片列表。
- CSS Grid (網格佈局)
- CSS3 專為二維排版設計的佈局模組。擁有更強大的功能，能同時控制「列」與「行」，適合用於建構整個網頁的基礎框架。
- justify-content
- 控制項目在「主軸」上的對齊與分佈方式。常用的值包括 center (置中)、space-between (左右貼齊、中間均分) 等。
- align-items
- 控制項目在「交叉軸」上的對齊方式。常用的值包括 center (置中對齊)、stretch (填滿容器高度) 等。
faq,
❓ 常見問題
- Q. 什麼時候該用 Flexbox，什麼時候該用 Grid？
- A. 簡單的區分原則是：一維排版（如單純的橫列排列或直行列表）請優先考慮 Flexbox；如果需要同時考慮列與行來進行複雜的二維佈局，請使用 CSS Grid。在現代網頁設計中，將兩者混合使用是很常見的模式（例如使用 Grid 建立外層版面，內部組件則用 Flexbox 排列）。
- Q. 能夠產生響應式 (Responsive) 的 CSS 嗎？
- A. 本工具不會自動替您寫出 `@media` 查詢語法，不過您可以透過啟用 Flexbox 的 `flex-wrap`，或是利用 CSS Grid 的 `repeat(auto-fit, minmax(...))` 語法，來產生基礎的響應式 CSS 佈局。
- Q. 產生的程式碼支援舊版 IE11 瀏覽器嗎？
- A. 本工具輸出的語法為現代標準 CSS，因此在 IE11 中，特別是 CSS Grid 或是 `gap` 屬性將無法正常運作。如果您需要相容舊版瀏覽器，建議搭配其他 Polyfill 或 fallback 方案使用。
scenes,
💡 使用場景
🎨
網頁設計原型製作
透過 GUI 視覺化介面，可以迅速設計出 header、footer 與側邊欄等整頁大架構。
⚡
加速前端開發
在開發初期可直接產生穩定的基礎排版 CSS，省去手動調整與查閱文件的時間。
📚
CSS 學習與教學
視覺化觀察不同的 Flexbox 與 Grid 屬性會對排版產生什麼樣的影響，非常適合新手學習。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
反饋發送成功。感謝您的合作！
發生錯誤。請稍後再試。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.