Gutter Width Issues in Susy

Question

I have a 24 Susy column grid. I'm trying to do some boxes that will each span 6 columns (so 4 per row), but I'm wanting to add some gutters around them, withing a wider container that is 24 columns wide. Unfortunately, no matter what I try, I can't get it to work. It seems the columns are not adjusting their width to accommodate the gutters...I thought Susy was supposed to do that, no? I'm new to all of this so I've read lots of articles and posts and can't figure out this answer, so any help you can give is greatly appreciated.

Here's the code:

.solutionThumbnails {
  @include span(24 no-gutters);
  @include container;
  @include clearfix; 
  li {
    @include span(6);
    @include gutters(8px after);
    background: #666;
    float: left;
    height: 240px;
    display: block;
    &:nth-child(4) {
      margin-right: 0px;
    }
  }
}

And here's what it's looking like right now, ignore the formatting otherwise, still coding :) (you'll see its knocking the fourth item down): https://i.stack.imgur.com/5tmWp.jpg

Answer 1

Because Sass isn't aware of the DOM, Susy doesn't know that your span and gutter mixins are being applied to the same element, or are related in any way. Susy will handle the math when it has all the information. I think you want something like this?

.solutionThumbnails {
  @include container(24);

  li {
    @include gallery(6 of 24 split);
    background: #666;
    height: 240px;
  }
}

I don't know your settings, or many specifics about the output you need, but that should get you close. You don't need to set a span, container, and clearfix on the same element — the container mixin handles all of that. Similarly, gallery handles everything you need for a consistent layout of same-sized items.

My example doesn't get you exactly 8px gutters. The only way to mix static (px) gutters with fluid (%) grids, is to move the gutters inside the elements. You can approximate 8px gutters with a fluid value by changing the gutter ratio as needed. The default ratio is .25.