砌体仅适用于一种尺寸设置48％23％

Question

之前有人遇到过这个问题，我的砌体布局是48％的盒子，23％的盒子，然后是一个较大的高度元素，其右边的尺寸覆盖了整个高度，也就是23％，所以总共94％则设置2％的装订线。这可以按预期工作，但是当我尝试将小盒子的宽度稍微延长一点，同时将大盒子的宽度减小以使总数保持在94％时，它将失去正确的布局，并在第一个2个盒子之后开始堆叠。 >

https://codepen.io/tomob7/pen/OwpENv

下面是我正在尝试进行的测量的地方，在上面的笔中。

jQuery(window).load(function() {
  jQuery('.cake-categories-links').masonry({
    itemSelector: '.cake-category-grid-item',
    columnWidth: '.cake-category-grid-sizer',
    gutter: '.cake-category-gutter-sizer',
    percentPosition: true
  });
});

.cake-category-grid-sizer,
.cake-category-grid-item {
  width: 100%;
  @media(min-width: $tablet) {
    width: 23%;
  }
}

.cake-category-gutter-sizer {
  width: 2%;
}

.cake-category-grid-item--width2 {
  width: 100%;
  @media(min-width: $tablet) {
    width: 48%;
  }
}

.cake-category-grid-item {
  height: 270px;
  margin-bottom: 2%;
  a {
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
}

.cake-category-grid-item--height2 {
  height: 560px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cake-categories-links">
  <div class="cake-category-grid-sizer"></div>
  <div class="cake-category-gutter-sizer"></div>
  <div class="cake-category-link cake-category-grid-item  cake-category-grid-item--width2   ">
  </div>
  <div class="cake-category-link cake-category-grid-item   ">
  </div>
  <div class="cake-category-link cake-category-grid-item   cake-category-grid-item--height2  ">
  </div>
  <div class="cake-category-link cake-category-grid-item   ">
  </div>
  <div class="cake-category-link cake-category-grid-item  cake-category-grid-item--width2   ">
  </div>
</div>