Jquery 设置div样式以闭合垂直间隙

我需要一个解决方案，使用css或jquery（如果适用）删除div之间的垂直空格

当前应用于div的css没有顶部或底部填充或边距。但内容较多的div会在相邻div中产生不希望出现的间隙。下图说明了我的意思：

框2在框1和框3后创建间隙

我正试图找到一个好的解决方案，将方框4和方框6移动到这些间隙中

提前感谢您的帮助

更新：

抱歉没有包括标记和样式代码。我没有这样做，因为它是一个非常复杂的网站的一部分。下面我添加了6个标记中的第一个：e框1。只需再重复5次。下面的样式代码是我所能做的最好的代码，而不必使用数百行代码

<div class="grid-container campaign-board">

    <div class="grid-x grid-margin-x">
        <div class="views-row cell small-6 medium-4">
            <div data-history-node-id="1241" role="article" class="contextual-region node node--type-campaign-board node--promoted node--view-mode-teaser campaign-board__item" about="/node/1241">
            <div class="campaign-board__title">
                <span class="field field--name-title field--type-string field--label-hidden">Box 1</span>
            </div>
            <div class="campaign-board__company"></div>
            <div class="campaign-board__name">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            </div>
            </span>
        </div>
    </div>
.
.
.
</div>


.campaign-board{
    padding-bottom: $global-padding * 3;
  }
    div.grid-x.grid-margin-x{
      border: 1px solid green;
    }
    div.views-row{
      border: 1px solid red;
    }
    .campaign-board__item{
      margin-bottom: $global-margin;
    }
      .campaign-board__title{
        color: get-color(june);
        font-size: rem-calc(16);
      }
      .campaign-board__company,
      .campaign-board__name{
       font-size: rem-calc(14);
       font-weight: 500;
       color: get-color(december);
      }

方框1
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
.
.
.
.竞选委员会{
底部填充：$global padding*3；
}
div.grid-x.grid-margin-x{
边框：1px纯绿色；
}
分区视图-行{
边框：1px纯红；
}
.活动板项目{
利润底部：全球利润；
}
.campaign-board_______________________标题{
颜色：获取颜色（六月）；
字体大小：rem calc（16）；
}
.运动董事会公司，
.活动板名称{
字体大小：rem calc（14）；
字号：500；
颜色：获取颜色（12月）；
}

*{
保证金：0；
填充：0；
}
.包装纸{
显示器：flex；
}
.行{
显示器：flex；
弯曲方向：立柱；
/*证明内容：之间的空间*/
}
上校{
边框：1px纯红；
填充：20px 15px；
}

JS-Bin
Lorem Ipsum只是一个虚拟文本
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本
Lorem Ipsum只是印刷的虚拟文本
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本

因为您使用的是行和列，所以我假设您使用的是某种形式的引导。如果确实是这样的话，bootstrap有一些类来帮助实现这一点

row align-items-start

将在顶部对齐项目

row align-items-center

将对齐中心…等

---

要获得完整的参考列表，请共享您的标记。您可能正在寻找砖石布局：不幸的是，由于无法访问您的标记和CSS，我认为社区没有很多选项可以为您提供有意义的帮助。请立即查看！如果你想消除差距，那么就不要保留在行中*调整内容：间隔*