Выравнивание галереи с остальной частью содержимого

Question

У меня возникла проблема с выравниванием галереи с остальной частью содержимого. Я использую контейнер с прокладкой, который я получаю через gutters, а галерея с прокладкой пролета плюс прокладка желобов.

Я хочу, чтобы их выровняли.

Image that shows the alignment

HTML:

<header id="header"> 
    <div class="container"> 
    header 
    </div> 
</header> 
<div id="content"> 
    <div class="gallery"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    </div> 
</div> 
<div id="sidebar">sidebar</div> 

CSS:

@import "susy"; 

$susy: (
    columns: 12, 
    gutter-position: inside, 
    global-box-sizing: border-box 
); 

@mixin container-padding($padding: gutter()) { 
    padding: 0 $padding 0 $padding; 
} 

$gallery_layout: (
    columns: 12, 
    gutters: 1/10, 
    gutter-position: split 
); 

@include border-box-sizing; 

.container { 
    @include container; 
    @include container-padding; 
} 

.gallery { 
    > .item { 
     @include with-layout($gallery_layout) { 
      height: 250px; 
      margin-bottom: gutter() * 2; 
      background-color: brown; 

      @include span(2); 
     } 

    } 
} 

#header { 
    height: 80px; 
    background-color: blue; 
} 

#content { 
    @include span(9); 
    background-color: yellow; 
} 

#sidebar { 
    @include span(3); 
    background-color: red; 
    height: 515px; 
} 

Примечание; margin-bottom: gutter() * 2; обусловлен разделением желобов.

Example running here.

@EDIT

Он работает как это сделать:

$gallery_layout: (
    columns: 12, 
    gutters: 1/10, 
    gutter-position: after 
); 

Единственная проблема, хотя в том, что он оставляет пустое пространство на конце и не заполнять весь дела. - Example here.

Answer 1

Попробуйте использовать gallery подмешать: @include gallery(2);

Вот the updated pen