弄清楚％的網格布局

Question

我一直試圖了解人們一直在使用的這種網格系統。 有時讓我感到愚蠢。

我了解，如果您使用無邊距的12格系統。 該第12列將為100％，而第1列將為約8.33333％。

我一直在看一些網格系統和onepcss網格，我有些困惑。 我知道剩下了1％，因為他/她聲明全寬網格為99％。 他們使用3％的邊距，但一欄= = 5.5％，但如果我做數學運算，則100/12 = 8.33333％-3％（用於邊距）= 5.3333％

我在他們的網格下面發布了一個示例。 我正在嘗試使用基本數學來弄清楚我做錯了哪一列？

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

Answer 1

在一個12列的網格中，有11個裝訂線。 因此，必須從總寬度（99％）中減去裝訂線寬度（33％）。 如果每個裝訂線為3％，則單列為：

（99-33）/ 12 = 5.5

然后，多列是加在一起的列加上它們“吸收”的裝訂線。 因此，三列是：

5.5 + 5.5 + 5.5 + 3 + 3 = 22.5

（三個列寬加上兩個裝訂線寬），從外觀上看：

┌─────── 22.5 ────────┐
| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5