1

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.

Example running here.

@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.

Mireba
  • 35
  • 5
  • what is the issue and what are you trying to accomplish? Not sure what *aligned* is supposed to mean; aligned with what? – justinw Oct 06 '15 at 18:15
  • See the image above and the running example that you will see that the header text isn't aligned with the gallery, and that is what I want to do. – Mireba Oct 06 '15 at 18:17
  • You are using this word, *aligned*, but it isn't clear what you want it *aligned* with or how you'd like it to be *aligned* (relative to what object). What are you trying to accomplish? Putting the `header text` in the `yellow` area right above the `red` 'gallery' objects? – justinw Oct 06 '15 at 18:20
  • Do you even have an idea of how you would go about doing this with just vanilla CSS? Susy isn't magic, it can only be used to generate valid CSS. – cimmanon Oct 06 '15 at 18:31
  • @cimmanon - That is the thing, susy is generating for me the CSS with its math. If I configure with `gutter-position: before` the items goes down and doesn't work. This is not about vanilla CSS, but the CSS generated by susy. - @Quoid - I want to align the gallery items with the container, as you can see, the header is using the container and it has padding on it, but the gallery has the padding of the susy "split" and the padding of the span. – Mireba Oct 06 '15 at 18:40
  • You haven't answered my question: do you know how to do this with vanilla CSS or not? If not, it sounds like you're asking the wrong question. – cimmanon Oct 06 '15 at 18:41
  • I don't think so, as the code is being generated by susy with `span` or `gallery`. Imma wait for the creator to answer, I think that he will get what I meant. – Mireba Oct 06 '15 at 19:09

1 Answers1

1

Try using the gallery mixin: @include gallery(2);

Here's the updated pen

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43