Susy Grids：在不改變整體網格大小的情況下更改12列div的大小？

Question

我正在使用Suzy進行現有網站的部分重新設計。在階段1中，我正在設計頁面的頂部：標題等，並使用遺留代碼。

在這一點上，我需要適應新的標題到舊的頁面內容。不幸的是，我結束的可用空間比現有內容的寬度小。

關於如何調整#legacy-content-wrapper的內容空間（可放置在容器內的內容的寬度）爲1002px寬的任何想法？

這裏是我的代碼：

$total-columns : 12;    // a 12-column grid 
$column-width : 69px;   
$gutter-width : 14px;   
$grid-padding : 25px;    
$container-style: static; 
// the resulting grid is 1032px wide 

#header-wrapper { 
    @include container; 
    .some-header-content { @include span-columns(3,12); } 
    .some-other-header-content { @include span-columns(9 omega,12); } 
} 

#page-wrapper { 
    @include container; 

    // legacy item, needs to be 1002px wide! 
    #legacy-content-wrapper { 

     @include span-columns(12 omega, 12); 

     // my children will be 982px at 100% width 

     // @include bleed($gutter-width) changes the width of the container 
     // but does not change the size of the usable space within it. 

     // how can I modify this item to have content swidth of 1002px? 

    } 
} 

這就是我要找：

<div id="page-wrapper"> 
    <div id="legacy-content-wrapper"> 
     <div>I'd like to be 1002 pixels wide!</div> 
    </div> 
</div> 

我結束了：

#legacy-content-wrapper { 
    margin: 0 0 -$grid-padding; 
    padding: 22px 14px; 
    @include clearfix; 
} 

Answer 1

您可以調整任何的網格設置以適應所需的空間。可能最簡單的方法是從grid-padding設置中將網格大小減少30px。

$total-columns : 12; 
$column-width : 69px;   
$gutter-width : 14px;   
$grid-padding : 10px;    
$container-style: static; 

你可以或者捏捏column-width或gutter-width設置，以實現相同數量的。沒有看到設計就很難說最好的方法。無論哪種方式應該讓你到1002px。