css - Susy Grids: 全体のグリッド サイズを変更せずに 12 列の div のサイズを変更しますか?

Question

既存のウェブサイトの部分的な再設計に Suzy を使用しています。ステージ 1 では、ページの上部 (ヘッダーなど) を設計し、残りはレガシー コードを使用します。

この時点で、新しいヘッダーを古いページ コンテンツに合わせる必要があります。残念ながら、最終的に使用できるスペースは、既存のコンテンツの幅よりも小さくなります。

コンテンツ スペース (コンテナ内に配置されたコンテンツに使用できる幅) を#legacy-content-wrapper1002px 幅に調整する方法についてのアイデアはありますか?

これが私のコードです：

$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;
}