html - 将图库与其余内容对齐

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; 是由于 gutters split。

Example running here.

@编辑

这样做是可行的:

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

但唯一的问题是它在末尾留下了一个空白区域，并没有填满整个 div。 - Example here.

Answer 1

尝试使用gallery mixin:@include gallery(2);

这是 the updated pen