How to stretch nested div full width outside of container div with susy?

Question

What is the recommended way to stretch nested div across full width using susy?

I am currently using bleed and wonder whether that's the correct approach.

And also how to make the design responsive mobile first?

Here is my html:

<div class="container">
    <div class="child1">
        <h4>Child1</h4>
        <div class="grandchild1">
            <p>Grandchild1</p>
        </div>
        <div class="grandchild2">
            <p>Grandchild2</p>
        </div>
        <div class="grandchild3">
            <p>Grandchild3</p>
        </div>
        <div class="grandchild4">
            <p>Grandchild4</p>
        </div>
    </div>
    <div class="child2">
        <h4>Child2</h4>
    </div>
    <div class="child3">
        <h4>Child3</h4>
    </div>
</div>

And here is my susy code:

//Library imports
@import "compass/reset";
@import "compass/css3";

@import "susy";
@import "breakpoint";
$susy:( columns: 12, container: 100%, output: float, gutters: 1/3, global-box-sizing: border-box, debug: ( image: show, output: overlay, color: rgba(77, 171, 252, .5), toggle: top right, ), );
.container {
    @include container();
    width: 75%;
    margin-top: 20px;
    .grandchild1 {
        display: block;
        margin-bottom: 14px;
        background-color: green;
        padding: 10px;
    }
    .grandchild2 {
        display: block;
        @include container();
        margin-top: 4px;
        @include bleed(1em 2 10px 20% of 12 .25);
        width: 100%;
        background-color: dodgerblue;
    }
    .grandchild3 {
        margin-top: 10px;
        @include full;
        @include span(8 of 12);
        background-color: red;
    }
    .grandchild4 {
        margin-top: 10px;
        //  @include full;
        @include span(3.4 of 12);
        background-color: greenyellow;
    }
}
.child1 {
    margin-bottom: 10px;
}

score 0 · Accepted Answer · answered Dec 10 '16 at 23:05

Your question and code aren't entirely clear, but I think you are trying to make a nested element span the full viewport width? There is no proper way to do that in CSS, so anything you do (with or without Susy) will be a rough approximation.

Susy's bleed is one way to fake it, if you want the content to stay where it is, and only have the padding/borders/backgrounds span the full width. The bleed mixin is applying negative margins to break the container, and matching positive padding to keep the content in place. If you want the content to span the full viewport as well, you should apply negative margins yourself. If you need it match the viewport width exactly, it will take some calculations that Susy doesn't know how to handle.

To make it mobile-first and responsive, you would want to build a mobile design, and then add any additional (tablet/desktop/etc) styles inside min-width media-queries. The details depend a lot on what you are trying to accomplish.

As a side-note, you are using container() in a way that was not intended. If it works for you, that's fine — but it looks like you are regularly overriding the output. The container() mixin is designed to give you a set width based on either the container setting, or a sum of column-widths. It also helps with clearfix, and horizontal centering. It looks like you are using it for the clearfix alone, and overriding everything else. I'd recommend using a simpler clearfix mixin for that.

How to stretch nested div full width outside of container div with susy?

1 Answers1