grid - Bourbon/Neat: マージンをリセットし、ネストされた div を幅全体に広げます

Question

私はバーボン/ニートが初めてです。ネスティングに関して質問があります。赤いボックスが幅全体を埋め、間にガターがないようにしたいです。それらに「@include omega」を使用すると、最初のボックスは右マージンを削除しますが、右ボックスにはまだマージンがあり、幅は調整されません。

それらの間にマージンなしで親ボックス全体にまたがるようにする方法を教えてください。

ここにデモがあります: http://wuergeengel.net.dd13736.kasserver.com/

ここに私のマークアップがあります:

<div class="container">
  <div class="box box-left"></div>
  <div class="box box-right">
    <div class="box-red-left nested"></div>
    <div class="box-red-right nested"></div>
  </div>
</div>

ここに私のスタイルがあります：

.container
{
  @include outer-container;
}

.box
{
  border: 1px solid black;
  height: 500px;
}

.box-left
{
  @extend .box;
  @include span-columns(4);
}

.box-right
{
  @extend .box;
  @include span-columns(8);

  .nested
  {
    border: 1px solid red;
    height: 400px;


    &.box-red-left
    {
      @extend .nested;
      @include span-columns(3 of 8);
      @include omega;
    }

    &.box-red-right
    {
      @extend .nested;
      @include span-columns(5 of 8);
      @include omega;
    }
  }
}

Answer 1

これを行うにはいくつかの方法があります。

• Neat のテーブル表示レイアウトを使用します。例えば：@include span-columns(5 of 8, table);

• Neat の基本機能flex-gridとflex-gutter機能を使用します。例えば：

  width: flex-grid(5, 8) + flex-gutter(8);
  float: left;