Width and margin with 1/2 column spans

[embolden]

Hello and thank you for all your hard work on Susy. Today is day 1 of working with it and I'm still wrapping my head around everything so I'm sorry if this is an obvious thing that I just missed.

I'm providing my config and two snippets of code with applicable screenshots of the resulting output and then my issue is below everything.

My current config:

$susy: (
    'columns': susy-repeat(12),
    'gutters': 0.25,
    'spread': 'narrow',
    'container-spread': 'narrow',
);

@at-root &__features {
    width: span(8);
}

@at-root &__checkbox {
    border: $base-border;
    float: left;
    margin: 0 gutter(8) $base-spacing 0;
    padding: 1em;
    width: span(4 of 8);
}

@at-root &__checkbox-feature:nth-of-type(2n) {
    margin-right: 0;
}

@at-root &__features {
    width: span(7);
}

@at-root &__checkbox {
    border: $base-border;
    float: left;
    margin: 0 gutter(7) $base-spacing 0;
    padding: 1em;
    width: span(3.5 of 7);
}

@at-root &__checkbox-feature:nth-of-type(2n) {
    margin-right: 0;
}

What is happening: When using span(7) and span(3.5 of 7) with gutter(7) every second div is breaking to a new line.

What I was expecting to happen: The behavior would be more similar to span(8) and span(4 of 8) with gutter(8).

Is this something that is possible? And if so, can you point me in the right direction? Thanks again!

[mirisuzanne]

The problem is that fractional columns throw off the gutter math, so you have to account for that. Each span of 3.5 includes 3 gutters. That's all six available gutters accounted for, so when you try to add a gutter between the spans, there isn't space for it. To make space between the spans, you need to remove half a gutter from each:

width: span(3.5 of 7) - (gutter(7) / 2); // explicitly subtract a half-gutter
width: span(3.375 of 7); // a gutter is .25 columns, so subtract .125 from the span

[embolden]

Awesome, thanks for your super quick and thorough response! Appreciate it! :)