[Grid] stackable grid has extra left/right margin when stacked

[kevinresol]

Bug Report

Stackable grid has extra left/right margin when stacked. See image below how the left margin of column 1 becomes wider when the grid is stacked.

Steps to reproduce

<div class="ui basic segment">
  <div class="ui two column stackable grid">
    <div class="column">
      <div class="ui segment">
        Column 1
      </div>
    </div>
    <div class="column">
      <div class="ui segment">
        Column 2
      </div>
    </div>
  </div>
</div>

Expected result

No extra margin when stacked. i.e. same amount of margin in both stacked and unstacked state

Actual result

Stackable grid has extra left/right margin when stacked.

Testcase

https://jsfiddle.net/04rj9sx2/2/

Screenshot (if possible)

Version

2.8.7

[hugopeek]

A basic segment still has padding: https://fomantic-ui.com/elements/segment.html#basic

So you'd have to set that to 0 manually, or use a different container..

[lubber-de]

I am unsure if we should completely remove the additional gutter on mobile as stated in #2269 (it seems to be a design choice of SUI, perhaps to make sure fingers holding the mobile phone won't cover content)

However, by the mentioned PR it's now possible to customize the gutter value.
If you set this to -1rem it solves our issue
See https://jsfiddle.net/lubber/ybjn5vgs/2/

[lubber-de]

Other workarounds:

• Use container instead of segment (as hugopeek mentioned)
• Use stackable page grid instead of stackable grid

[lubber-de]

Fixed by #2269
See your adjusted jsfiddle here https://jsfiddle.net/lubber/vqj0xdg1/19/