CODEWITHSUNDEEP
susy-compasssusy-sassguttersusysusy-next
Thomas Luzat
Thomas Luzat

Reputation: 740

How do gutters work in Susy 2?

I am trying to generate gutters which span 1/5 of 4 a column span. The global setup is:

$page-width: 1080px;
$susy: (
    columns: 12,
    math: fluid,
    gutter-position: inside,
    gutters: 1/4.5, // will be overriden; I think ...
    global-box-sizing: border-box,
    use-custom: (rem: true),
    container: $page-width
);

Followed by this selector:

.mosaic {
    // Setting gutters of 4 * 1/5 single column width,
    // to be distributed 2/5 left, 2/5 right
    @include gallery(4 of 12 4/5);
}

The generated CSS for .mosaic is:

.mosaic {
    width: 33.33333%;
    float: left;
    padding-left: 1.85185%; // Expected/wanted: 3.333...%
    padding-right: 1.85185%; // dito
}

I did expect the padding at each side to be 4/5 / 12 (columns) / 2 (sides) = 1/30 = 3.333...% which would result in a gutter of 1/5 (1/10 on each side) of the column span's total width.

  1. How do I achieve the expected result?
  2. How are the padding values (1.85...%) calculated?
  3. Why do they not match what I expect?

Upvotes: 0

Views: 399

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

This is how Susy does the math:

  1. Each column is 1 column-unit wide, plus 4/5 column-units of gutter. Total: 1.8
  2. There are 12 columns. Total: 21.6
  3. Each gutter is calculated as .8/21.6 (target/context). Total: .037037037
  4. That gutter is divided in half & converted to a percentage. Final: 1.8518518%

The difference is that gutters are considered part of the total context. They add to the width of each column, rather than being subtracted from it.

Upvotes: 1

Related Questions