Zurb Foundation XY网格产生不一致的装订线

Question

我正在寻找一种通用的解决方案，该解决方案适用于每个场景，每个场景之间都有网格。

开箱即用，当带有.grid-margin-y的栅格彼此相邻时，它们之间会产生一半的栅格装订线，这使得很难应用通用规则来获得一致的外观。

如果具有.grid-margin-y的网格之后是没有.grid-margin-y的网格，则它们之间将没有装订线。

理想情况下总是如此。我可以通过对网格容器应用“溢出：隐藏”来解决这种情况，但这不会使绝对定位的内容流到网格外部，而看起来更像是黑客。

这是Codepen示例： https://codepen.io/pettere/pen/ExYmKWP

  body {
    padding: 30px;
  }

  .demo {
    background: #1779ba;
    height: 50px;
    line-height: 50px;
  }

  .cell {
    /*background: dodgerblue;*/
    background: red;
    color: white;
    text-align: center;
    //margin-bottom: 30px;
  }

  .block {
    height: 100px;
    background: red;
  }

  .block-content {
    background: yellow;
    margin: 0;
  }

  .grid-container:nth-child(even) .cell {
    background: purple;

  }

  .grid-container:nth-child(even) .cell .demo {
    background: green;

  }

  .grid-container.overflow {
    overflow: hidden;
  }



    <div class="grid-container full">
      <div class="grid-x grid-margin-x grid-margin-y grid-padding-x grid-padding-y"">
        <div class="medium-12 large-6 cell"><div class="demo">Grid 1</div></div>
        <div class="medium-12 large-6 cell"><div class="demo">Grid 1</div></div>
                                                             <div class="medium-12 large-6 cell"><div class="demo">Grid 1</div></div>
                                                            <div class="medium-12 large-6 cell"><div class="demo">Grid 1</div></div>
      </div>
    </div>
    <div class="grid-container full">
    <div class="grid-x grid-margin-x grid-margin-y grid-padding-x grid-padding-y">
      <div class="medium-12 large-4 cell"><div class="demo">Grid 2</div></div>
      <div class="medium-12 large-8 cell"><div class="demo">Grid 2</div></div>
      <div class="medium-12 large-4 cell"><div class="demo">Grid 2</div></div>
      <div class="medium-12 large-8 cell"><div class="demo">Grid 2</div></div>
    </div>
    </div>

    <div class="grid-container full">
        <div class="grid-x grid-padding-x grid-padding-y">
          <div class="cell">
            <div class="demo">Grid 3</div>
          </div>
          <div class="cell">
            <div class="demo">Grid 3</div>
          </div>
      </div>
    </div>





                             <div class="grid-container full overflow">
      <div class="grid-x grid-margin-x grid-margin-y grid-padding-x grid-padding-y"">
        <div class="medium-12 large-6 cell"><div class="demo">Grid 1</div></div>
        <div class="medium-12 large-6 cell"><div class="demo">Grid 1</div></div>
                                                             <div class="medium-12 large-6 cell"><div class="demo">Grid 1</div></div>
                                                            <div class="medium-12 large-6 cell"><div class="demo">Grid 1</div></div>
      </div>
    </div>
    <div class="grid-container full overflow">
    <div class="grid-x grid-margin-x grid-margin-y grid-padding-x grid-padding-y">
      <div class="medium-12 large-4 cell"><div class="demo">Grid 2</div></div>
      <div class="medium-12 large-8 cell"><div class="demo">Grid 2</div></div>
      <div class="medium-12 large-4 cell"><div class="demo">Grid 2</div></div>
      <div class="medium-12 large-8 cell"><div class="demo">Grid 2</div></div>
    </div>
    </div>

    <div class="grid-container full overflow">
        <div class="grid-x grid-padding-x grid-padding-y">
          <div class="cell">
            <div class="demo">Grid 3</div>
          </div>
          <div class="cell">
            <div class="demo">Grid 3</div>
          </div>
      </div>
    </div>