Question

我正在使用singularitygs（和网格系统），当然我遇到了问题。在这里。

我有这个HTML标记：

<div id="wrapper">
  <div id="main">
    <div id="first-column">content</div>
    <div id="second-column">content2</div>
  </div>
</div>

我设置了这个不对称网格：

$grids      : 97px 263px 263px 97px;
$gutters    : 70px;

这个scss：

#wrapper {
  @include background-grid;
  width: 930px;
  margin: 0 auto;
}
#main {
  //@include background-grid;
  @include grid-span(2, 2); //this element is spanned acros two columns in the middle
}
#first-column {
  @include grid-span(1, 1); //should be spanned acros first column in #main
}
#second-column {
  @include grid-span(1, 2); //this element should be spanned acros second column in #main
}

问题是如何让内部div知道#main应该只有两列（和一个装订线）这一事实。相反，它看起来像#main继承了默认的网格设置。

我尝试了很多选项，例如通过@include布局更改#main网格。或者通过添加@include grid-span(1, 1, 2);告诉列适应正确的上下文（第三个数字应该告诉div它在默认的网格上下文中。但无济于事。我怀疑问题出在我的默认网格的px定义中。因为内部div很多时间只有1.356％宽，这对我来说看起来很麻烦。我对吗？我该怎么办？

感谢您的任何建议。

编辑：我尝试添加精确的px维度，并结合添加嵌套上下文，它看起来像它的supossed，但我认为这不是它应该如何工作??

#block-formblock-contact-form {
  @include  grid-span(1, 2, 2);
  width: 263px;
}

#block-system-main {
  @include  grid-span(1, 1, 2);
  width: 263px;
}

Answer 1

您正在运行的问题是，当您将网格更改为双列对称网格时，您没有按比例更改排水沟。奇点是如何看待你目前的设置是你有一个2列网格，每列宽度为1，宽度为70的阴沟。现在，有两种方法可以解决这个问题。第一种是明确说明子网格与主网格的关系。这看起来如下：

#first-column {
  @include grid-span(1, 1, 263px 263px);
}
#second-column {
  @include grid-span(1, 2, 263px 263px);
}

或使用@include布局

@include layout(263px 263px) {
  #first-column {
    @include grid-span(1, 1);
  }
  #second-column {
    @include grid-span(1, 2);
  }
}

第二个选项是在使用子网格时为列到排水沟设置正确的比率。奇点在处理小比率而不是大的“绝对”值时效果最好。

@include layout(2, (70px / 263px)) {
  #first-column {
    @include grid-span(1, 1);
  }
  #second-column {
    @include grid-span(1, 2);
  }
}

希望这有帮助！

带有像素度量的嵌套网格

1 个答案: