具有像素度量的嵌套网格

Question

我从奇点(和网格系统)开始，当然我遇到了问题。

我有这样的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应该只有两列(和一个gutter)的事实。相反，它看起来像#main继承了默认的网格设置。

我尝试了很多选项，比如通过@include layout改变#main grid。或者通过添加@include grid-span(1, 1, 2);(第三个数字应该告诉div它在默认的网格上下文中)来告诉列适应正确的上下文。但无济于事。我怀疑问题是在我的默认网格的px定义。因为内线只有1.356%的宽度有很多时间，这对我来说有点可疑。我说的对吗?我能做什么?

谢谢你的建议。

编辑:我试着添加精确的px尺寸，并与添加嵌套的上下文相结合，它看起来像它应该的，但我认为这不是它应该如何工作??

#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

您遇到的问题是，当您将网格更改为两列对称网格时，您没有按比例更改水沟。Singularity看到的是你目前的设置，你有一个2列的网格，每一列的宽度为1，以及一个宽度为70的沟槽。现在，有两种方法可以解决这个问题。首先是明确地说明子网格相对于主网格是什么。它看起来像这样:

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

或，带@include layout

@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);
  }
}

希望这对你有帮助!