Design Drifter
所有工具
CSS Grid／Flexbox 版面產生器
視覺化建立 CSS Grid 或 Flexbox 版面並複製程式碼。
設計檔案只在瀏覽器內處理，不會上傳。
關於
Design Drifter 路線圖中的實用瀏覽器工具，專注完成一項圖片、檔案、設計、開發或 SEO 工作；可以在本機處理的內容都會留在瀏覽器內。
調整欄數、列數、間距與對齊方式，觀察版面預覽更新後複製 CSS 起始程式碼。
你可以做什麼
- 切換 Grid 與 Flexbox 預覽。
- 調整欄數、列數、間距與水平對齊。
- 產生可直接複製的 CSS。
常見用途
- 快速規劃卡片網格。
- 找出 Flexbox 對齊宣告。
- 教學或說明基本響應式版面屬性。
常見問題
產生的 CSS 包含所有版面屬性嗎？
它是對應畫面控制項的精簡起始範本，仍可依專案需求加入響應式規則。
可以建立響應式版面嗎？
Grid 會使用 repeat() 與 minmax() 作為實用起點，之後可再加入 media query。