What is the best way to deal with the mandatory left margin that comes with grid-column in Bourbon Neat 2.0 above?

Question

This is the output of a grid-column mixin as mentioned on the site -

.element {

  width: calc(25% - 25px);
  float: left;
  margin-left: 20px;

}

My problem is that I don't want gutters before and after the first and last columns.

Bootstrap uses a row class that has negative left and right margins to adjust the column padding.Is a similar approach suggested for Neat layout?

What is the problem you want to deal with? – matthewelsom Dec 06 '17 at 03:51 — matthewelsom, Dec 06 '17 at 03:51
Why would this question be downvoted without explanation? – Arriving From The Sky Dec 06 '17 at 03:57 — Arriving From The Sky, Dec 06 '17 at 03:57
It is not clear if you have a problem you want to solve... – matthewelsom Dec 06 '17 at 03:59 — matthewelsom, Dec 06 '17 at 03:59
Hope it's clear now :) – Arriving From The Sky Dec 06 '17 at 04:03 — Arriving From The Sky, Dec 06 '17 at 04:03

matthewelsom · Accepted Answer · 2017-12-06T04:31:33.510

2

You can use @grid-collpase to consume the gutters of a container.

Output:

.element {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}

Hope that is what you are looking for.

edited Dec 06 '17 at 04:31

answered Dec 06 '17 at 03:50

matthewelsom

Even if I use a custom grid, won't it add a margin anyway since I am going to still use the grid-column mixin ? – Arriving From The Sky Dec 06 '17 at 03:58
Updated my answer to reflect your updated question :) – matthewelsom Dec 06 '17 at 04:32
1

I'll give it to you – Arriving From The Sky Dec 06 '17 at 04:47

1 Answers1