色彩格式轉換
轉換 HEX、RGB、HSL 與透明度，即時檢視色樣並複製可用於 CSS 的色值。
CSS Grid 版面產生器
以即時預覽設定固定或自適應欄數、間距與對齊，複製對應的 CSS 與 HTML。
工具介紹
建立卡片列表前，先縮放預覽容器，確認各種寬度下的排列。
使用說明
選擇固定欄數，或依最小欄寬自動排列。調整列數、間距、對齊及項目數，再拖曳預覽寬度確認窄版效果。CSS 與 HTML 可分別複製或下載。
寬度滑桿只影響預覽容器。固定網格支援 1–12 列／欄、0–80 px 間距及最多 48 個項目。產生的程式碼包含版面與基本項目尺寸，請依內容補上視覺樣式。
常見問題
怎麼讓欄數隨寬度自動調整？
選擇自動適配並設定最小欄寬，匯出規則會使用 auto-fit 與 minmax。預覽寬度只供模擬，不寫入 CSS。
為什麼網格比設定的行數還多？
行數定義的是顯式軌道，並不是子項上限。固定 3 欄、2 行只有 6 個初始格子，第 7 個子項會讓瀏覽器建立隱式行。若只想預覽這六格，請把子項數量也調整為 6。
相關工具
在新分頁開啟
評論
0