CODEWITHSUNDEEP
csscss-gridbourbonneat
Arriving From The Sky
Arriving From The Sky

Reputation: 263

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

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?

Upvotes: 0

Views: 208

Answers (1)

matthewelsom
matthewelsom

Reputation: 944

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

Output: 

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

Here is a pen example https://codepen.io/matthewelsom/pen/RjOEyb

Hope that is what you are looking for.

Upvotes: 2

Related Questions