XY-сетка Zurb Foundation создает непостоянные желоба

Question

Я ищу общее решение, которое можно применить в рамках проекта для каждого сценария с сетками, следующими друг за другом.

Изначально, когда сетки с.grid-margin-y следуют друг за другом, между ними образуется половина желоба сетки, что очень затрудняет применение общих правил для единообразного внешнего вида.

Если за сеткой с.grid-margin-y следует сетка без.grid-margin-y, между ними не будет промежутков.

В идеале так будет всегда. Я могу сделать это так, применив "overflow: hidden" к контейнерам сетки, но это не позволит абсолютно позиционированному содержимому вытекать за пределы сетки и больше похоже на взлом.

Вот пример 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>