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或{{1}}设置以获得相同的数字。没有看到设计就很难说最好的方法。无论哪种方式都可以让你达到1002px。

Susy Grids：改变12列div的大小而不改变整体网格大小？

1 个答案: