CODEWITHSUNDEEP
csscompass-sasssusy-compass
Steve
Steve

Reputation: 14922

Compass susy columns with no gutters?

I have a grid that works perfectly, except that I want the columns in the nav to butt up against each other. This is a 24-column magic grid on desktop, and each of these nav items are 4/24. If I try negative margins, they no longer span the whole width of the nav bar, they slide over to the left and leave a hole (last item is an omega). Can this be done with columns, or do I just need to do my navbar without? Here in this screenshot I have colored them all gray to make it obvious:

enter image description here

Upvotes: 2

Views: 5969

Answers (2)

Kai Vong
Kai Vong

Reputation: 381

Eric Meyer is so awesome that he's now included something that would help you with this problem Steve - have a look at bleed in the latest version of Susy.

I believe this would help you with your problem. It allows you to do the following: 

.nav-item {
  ...
  @include bleed(1 of 4);
}

Have a thorough read through of the update to susy with isolate & bleed

Hope that helps! And thanks Eric for doing such a great job on Susy :)

Upvotes: 1

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

If you don't need gutters, you don't need help from Susy - the math is simple:

.nav-item {
  float: left;
  width: percentage(4/24);
}

That's it, but as you noticed, there's extra space left over in some browsers due to sub-pixel rounding. There is no simple solution to sub-pixel rounding, except learning to design around it. Susy floats the final column right, as it's easier to hide space inside than at the edges.

Your other option is a bit hacky, and get's you closer (but not the whole way). By pulling all the columns flush-left, you can push them back into place without letting the rounding-errors add up. That way you never have more than a 1px gap:

.nav-item {
  float: left;
  width: percentage(4/24);

  // pull things flush left
  margin-right: -100%;

  // push things back into place
  @for $i from 1 through 6 {
    &:nth-child(#{$i}) { margin-left: percentage(($i - 1)*4/24); }
  }
}

You can use classes in place of :nth-child if you are supporting older browsers, of course. If you are doing any sort of responsive design, this is the best you can possibly do. There is no way to avoid sub-pixel rounding entirely with responsive design. I highly recommend learning to design around that.

Upvotes: 3

Related Questions