Susy Omega問題獲得列寬正確

Question

遇到問題試圖獲得正確的列寬度跨4個不同的斷點設置爲我想要的。

當我使用span-columns（3,12）時，我希望最大尺寸的總寬度爲300px，每個內容之間填充20px。我試圖用數學方法來設置每列的寬度，但它不像預期的那樣工作。

我的一些代碼是：

$total-columns: 12; 
$column-width: 86.666667px; 
$gutter-width: 20px; 
$grid-padding: 20px; 
$container-width: 1300px; 
$container-syle: static; 

使用（3，12）我的內容塊是走出與295px的寬度。我怎樣才能得到它總計300px？

Answer 1

如果您想根據列寬進行數學運算，您應該刪除$container-width覆蓋。那麼數學很簡單：

3 * $column-width + 2 * $gutter-width = 300px 

該等式有很多可能的解決方案，取決於你想要的大小的水槽。顯然，你已經這樣做了：

3 * 86.666666667px + 2 * 20 ~= 300px 

或...

3 * 90px + 2 * 15px = 300px 

等適合目前設定唯一的問題是，你重寫列出數學與自己的$container-width。