I'm having a problem with the gallery alignment with the rest of the content.
I'm using container with padding that I'm getting through gutters
and the gallery is with the padding of the span, plus the padding of the gutters.
I want to make them aligned.
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;
}
Note; The margin-bottom: gutter() * 2;
is due the gutters split.
@EDIT
It works doing this:
$gallery_layout: (
columns: 12,
gutters: 1/10,
gutter-position: after
);
The only problem though is that it leaves an empty space on the end and don't fill the entire div. - Example here.
Try using the gallery
mixin: @include gallery(2);
Here's the updated pen