Negative margin on grid?

[henrikra]

Why on grid class there is negative margin on right? margin-right: -0.25em; It messes up the columns a bit. Is this a bug or is there a reason?

[daneden]

It’s there for a reason—setting the columns to display: inline-block means that they honor the whitespace in markup, putting regular word spaces between each column. The negative margin is there to counter the whitespace.

However, if you delete the whitespace in your markup (or if it’s never present—for instance, React eliminates whitespace in its rendered components), then the negative margin is problematic.

One fix is to add a modifier to the grid container to remove whitespace from the columns:

.o-grid--no-whitespace {
  .o-grid__col {
    margin-right: 0;
  }
}

[henrikra]

Wow thanks! I am actually using React in my project and that is why I don't have any whitespace. Thank you for fast response.