如何爲12列Susy Grid指定2.5％的排水槽

Question

我有一個移動的第一個網站，其中有兩個不同的網格設置。直到600px：

$sm-screen-grid: (
    columns: 5, 
    gutters: 1/3 
); 

這些排水溝顯示爲2.5％填充，仍然試圖找出如何精確計算。 600後我切換到12列網格。我的問題是，我想排水溝寬度仍然是2.5％。我似乎無法弄清楚，因此爲使什麼值指定水槽：

padding-left: 2.5%; 
padding-right: 2.5%; 

論壇的容器。

有什麼建議嗎？

Answer 1

蘇西的數學根據溝槽位置而變化。基於該輸出，我猜你正在使用inside設置。那數學的樣子：

// target-width/context-width * 100% 
$single-gutter: $gutters/($columns + ($gutters * $columns)) * 100%; 

在你的情況，這個等式的結果是5%，這是左，右填充之間劃分 - 2.5%每個。據我所知，12列網格需要設置爲1.5的排水溝才能獲得相同的結果。這意味着，爲了保持一個確切的2.5%，你的排水溝將比你的專欄更大。

請記住，百分比填充是通過引用包含元素來計算的，而不是被填充的元素。所以保持%相同不會保持列與陰溝的比例相同。如果您嘗試使用該列的排水槽始終爲2.5%，則應將排水溝設置更改爲.25並將其留在那裏。百分比輸出將改變，但列與陰溝的比率將與任意數量的列保持相同。