CompassSusy Nested Grids not giving correct column widths/margins

Question

I have a main grid setup with susy and then in the footer element I use Susy's with-grid-settings() mixin to generate a slightly different grid as follows:

footer
  +span-columns(5 omega, 5)
  +with-grid-settings(5, 174px ,20px ,0)
    +container
    @if $dev-mode-footer == true
      +susy-grid-background
    height: 240px

So footer should span all 5 of the main columns and include a new grid of slightly different widths and uses the container mixin to apply it.

So, then inside footer I have some ul's which are set to span 1 column each but the margin left is practically doubled.

Here is the CSS:

footer
  .banner
    +span-columns(5 omega, 5)
    height: 187
    border-top: 3px solid $highlight-1
    border-bottom: 3px solid $highlight-1
    padding: 10px 0

    ul
      +pie-clearfix

    li
      +span-columns(1, 5)
      border-right: 1px dotted $highlight-2
      padding-left: 35px

and a picture of the outcome:

It justs seems like it is aligning to the wrong grid context. Is it something to do with the fact that both grids have the same number of columns or something?

Answer 1

That's not how things work, sorry. It's really a conceptual problem. Susy helps you design to a grid, but the grid itself does not exist anywhere. Applying container does not establish anything besides a proper max-width. That container doesn't have any knowledge of the grid inside it. with-grid-settings is similarly unable to effect anything outside itself. Any items on the new grid must be passed inside the with-grid-settings mixin.

Here's what you are actually doing:

First, +span-columns(5 omega, 5) doesn't do anything useful. You have just floated an item to the right, and applied 100% width. But block elements span their full context by default, so there is no real change - just extra code. The one effect you might want from this is clearing floats, but you should use clearfix for that instead.

Then, on the same element, container is simply setting a new max-width, and auto margins. That is, in fact, all a container is - and in this case you don't need it. New nested grids don't need new containers. All you need is with-grid-settings.

Here's my guess on what you actually want:

footer
  +clearfix
  +with-grid-settings(5, 174px ,20px ,0)
    @if $dev-mode-footer == true
      +susy-grid-background
    height: 240px
    .banner
      +clearfix
      height: 187
      border-top: 3px solid $highlight-1
      border-bottom: 3px solid $highlight-1
      padding: 10px 0

      ul
        +pie-clearfix

      li
        +span-columns(1, 5)
        border-right: 1px dotted $highlight-2
        padding-left: 35px

You might also need to use nth-omega(5n) on the li.