When gutter is set as fixed, gutters are added as paddings instead of margins.
So when you set your last column as last with @include float-span(4, last);
for example last column loses its gutter but occupies whole available space as you can see here:
https://www.sassmeister.com/gist/6c12c4c8a67db11fee0dc3c8529097b4 (I've made gutters very big so that you can see difference more easily)
Here is the used scss:
// settings.scss
@include add-grid(12);
@include add-gutter-style('opposite');
@include add-gutter(150px);
// style.scss
* {
box-sizing: border-box;
}
.view-content {
height: 10rem;
}
.views-row {
height: 10rem;
@include float-span(4);
&:nth-child(3n + 3) {
@include float-span(4, last);
}
}
.views-row__inner {
background: yellow;
}
* {
box-sizing: border-box;
}
.view-content {
height: 10rem;
}
.views-row {
height: 10rem;
-sgs-span-settings: ("span": 4, "location": 1, "grid": 12, "gutter": 150px, "style": "opposite", "start row": true, "end row": false, "fixed gutter": true, "split gutter": null, "gutter property": "padding", "options": (null: null));
width: 33.33333%;
clear: right;
float: left;
padding-right: 150px;
}
.views-row:nth-child(3n + 3) {
-sgs-span-settings: ("span": 4, "location": 9, "grid": 12, "gutter": 150px, "style": "opposite", "start row": false, "end row": true, "fixed gutter": true, "split gutter": null, "gutter property": "padding", "options": (null: null));
width: 33.33333%;
clear: right;
float: right;
padding-right: 0;
}
.views-row__inner {
background: yellow;
}
<div class="view-content">
<div class="views-row"><div class="views-row__inner">good</div></div>
<div class="views-row"><div class="views-row__inner">good</div></div>
<div class="views-row"><div class="views-row__inner">bad</div></div>
</div>
Is this expected behavior? Am I missing something?
Ideally I would like to have fixed gutter, all columns exactly the same, but aligned with container.