Changing Gutters only for a section using susy

Question

I'm building a site with susy to allow flexibility with the grids I need, I have not set any settings at the moment so Im only using the defaults.

I want to be able to change the gutters (make them smaller) for a section of the site. I built it out here:

http://sassmeister.com/gist/89243b68852fdd9cf282

SCSS

.feature-box-container
   {
   @include container(80em); 
    .feature-box
    {
        @include gallery(4 of 12);
        img 
        {
            margin-bottom:20px;
            width: 100%;
        } 
    }
}

HTML

<div class="feature-box-container container">
    <div class="feature-box">
        <!-- 450 -->
        <div>
            <img src="http://placehold.it/355x170" alt="">
        </div>
        <div>
            <img src="http://placehold.it/355x280" alt="">
        </div>
    </div>
    <div class="feature-box">
        <div>
            <img src="http://placehold.it/355x317" alt="">
        </div>
        <div>
            <img src="http://placehold.it/355x133" alt="">
        </div>
    </div>
    <div class="feature-box">
        <div>
            <img src="http://placehold.it/355x270" alt="">
        </div>
        <div>
            <img src="http://placehold.it/355x180" alt="">
        </div>
    </div>
</div>

In the picture it has the sites default, but I need only this section to have at least half the gutter width it has now.

Answer 1

You can use the with-layout mixin to [change your grid settings for a nested block of code]](http://susydocs.oddbird.net/en/latest/settings/#with-layout).

@include with-layout($new-settings) {
  // code you want affected...
}