柵格寬度計算器

📖 工具介紹

柵格寬度計算器是一款面向前端工程師與介面設計師的版面配置輔助工具。無論是手寫 CSS 還是基於 Bootstrap、Tailwind 等框架還原設計稿，都繞不開一個核心問題：在給定的容器寬度下，一列到底有多寬？一個跨三列的區塊又該占多少像素？靠心算和取整總是差幾像素，寫到樣式表裡還會出現累積誤差。本工具把柵格版面的幾何關係徹底拆開：您只需填入容器寬度、總列數、列間距 gutter 以及左右外邊距，工具立刻推導出內容區寬度、單列像素寬度以及含間距的槽位寬度，並把從 span 1 到 span N 的每一種跨度對應的像素寬度與占內容區百分比整理成一張表。其底層公式非常直接：先從容器寬度裡扣除兩側外邊距得到內容區，再在內容區裡預留 (列數−1) 個列間距，把剩餘寬度均分給每一列；而跨度 k 列的寬度等於 k 個單列加上 (k−1) 個間距。工具還會給出一條與列數成比例的視覺化色條，讓您一眼判斷柵格是否均衡。所有計算在瀏覽器本機完成，無任何網路請求。

✨ 功能特點

• 四項參數自由組合：容器寬度、列數、列間距、左右外邊距全部可設
• 精確公式推導：列寬與跨度寬度均依像素計算並保留兩位小數
• 完整跨度表：列出 span 1 到 span N 的像素寬度與百分比
• 視覺化色條：依真實列數繪製等寬色塊，直觀看出柵格節奏
• 邊界檢查：間距過大、外邊距超界等非法組合會得到明確提示
• 一鍵複製結果：計算表可做為純文字複製，直接貼上至文件或樣式表

📝 使用方式

1. 在容器寬度中填寫目標版心的像素寬度，例如 1200
2. 在列數中填寫總列數，常見為 12，也可改為 16 或 24
3. 在列間距中填寫相鄰兩列之間的間隙，例如 20
4. 在左右外邊距中填寫容器兩側的留白，沒有則填 0
5. 點擊計算，右側即出現摘要、色條與跨度寬度表，可一鍵複製

⚠️ 注意事項

• 數值合法性：所有參數必須為非負有效數字，非法輸入會被攔截
• 列數下限：列數至少為 2，否則柵格沒有意義
• 間距約束：當列間距之和超過內容區寬度時工具會提示無法放下
• 外邊距約束：左右外邊距之和不能超過容器寬度本身
• 本機計算：所有運算在瀏覽器內完成，不會上傳任何資料