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.
- How do I achieve the expected result?
- How are the padding values (1.85...%) calculated?
- Why do they not match what I expect?