적당한 여백을 위한 중첩된 요소들과 함께는 뷔페 아침 식사가 2

Question

나을 구축을 위해 노력하고 간단한 중첩된 레이아웃과 함께는 뷔페 아침 식사가 2:컨테이너로 두 개의 열이(어린이),서로 아이를 포함하는 열 복사하고 두 개의 중첩된 열이(손자).

하는 것을 나는 주의 손자는 열이 자신의 홈통하고 따라서 자신의 콘텐츠 정렬되지 않을 잡는 그들의 부모입니다.

이상적으로,손자들(그리고 그들의 배경 색상)를 확장하여 전체 폭 아이의 요소입니다.

무엇이 가장 좋은 방법입니다 이것을 달성하기 위해?

gist: https://gist.github.com/andreimoment/2a734aa4a0e99b2866e9

HTML:

<div class="parent">
  <div class="child">
    <p>child 1</p>
    <div class="grandchild">Grandchild 1</div>
    <div class="grandchild last">Grandchild 2</div>
  </div>  
  <div class="child last">child 2</div>  
</div>

줍:

@import "compass";
@import "susy";

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

$susy: (
  columns: 12,
  column-width: 4em,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position:inside,
  global-box-sizing: border-box,
  debug: (
    image: show,
    color: rgba(200,100,100,.3),
    output: overlay,
    toggle: top right,
  ),
);

.parent {
  @include container();
  @include show-grid(background);
  padding:0;
  @include clearfix;
  }

.child {
  background-color: rgba(100,100,200, 0.5);
  @include span(first 6 of 12);
  &.last {
    @include span(last 6 of 12);
  }
}

.grandchild {
  background-color: rgba(100,100,200, 0.5);
  @include span(first 3 of 6);
  &.last {
    @include span(last 3 of 6);
  }
}

Answer 1

사 nest 키워드하는 말 Susy 는 범위 아이가 있습니다.이 필요하다 inside 고 split 석을 사용하고 있습니다.

@include span(first 6 of 12 nest);

사용할 수도 있습니다 no-gutters 당신이 원하는 모든 시간을 방문하여 출력되지 않은 개골창—지 nest 은 더욱 의미가 분명합니다.

참고:당신은 또한 당신을 사용할 필요가 없 first 가 inside 나 split 골.지 요 last 중 하나,그와 함께 도움이 될 수 있습니다 일부 서브 픽셀 반올림 문제입니다.사람들을 아프게 아무것도 하지만,삭제할 수 있습니 없는 손상을 일으키는.