Susy Grids：在不改变整体网格大小的情况下改变 12 列 div 的大小？

Question

我正在使用 Suzy 对现有网站进行部分重新设计。在第一阶段，我正在设计页面的顶部：标题等，其余部分使用遗留代码。

此时我需要将新标题与旧页面内容相匹配。不幸的是，我最终得到的可用空间小于现有内容的宽度。

知道如何将#legacy-content-wrapper 的内容空间（可用于放置在容器内的内容的宽度）调整为 1002 像素宽吗？

这是我的代码：

$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 设置将网格大小减少 30 像素。

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

您也可以调整column-width 或gutter-width 设置以达到相同的数字。不看设计就很难说最好的方法。无论哪种方式都应该让你达到 1002 像素。