csscss-gridbourbonneat

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?

Solution

  • 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.