Singularity grid fixed gutters issue

67 Views Asked by At

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.

0

There are 0 best solutions below