砌体 - 灵活的高度？

Question

问题：如何让我的砌体高度灵活到页面？我有灵活的宽度，但高度似乎是一个问题。出于某种原因，唯一的宽度使您可以使其成为百分比。不高。如果可能的话，我喜欢每个项目底部的蓝色部分来跟随图像。

Codeply：https://www.codeply.com/go/AQx8CfhErq //在那里按外部查看器可以清楚地看到我的意思。

我还包含一个代码段。

<!-- jQuery first, then Tether, then Bootstrap JS. -->
<
script src = "https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity = "sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin = "anonymous" > < /script> <
script src = "https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity = "sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin = "anonymous" > < /script> <
script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity = "sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin = "anonymous" > < /script>

  <
  script src = "https://masonry.desandro.com/masonry.pkgd.js" > < /script>

  <
  script >
  // external js: masonry.pkgd.js

  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 10 %
  });



<
/script>

.topic-hltv {
  background-color: #0142ff;
  min-height: 60px;
  padding-left: 5%;
}

.topic-hltv span {
  color: white;
  font-family: 'Trueno';
  font-weight: 800;
  font-style: normal;
  font-size: 1.4rem;
}


/* ---- grid ---- */

.grid {
  background: #EEE;
}


/* clearfix */

.grid:after {
  content: '';
  display: block;
  clear: both;
}


/* ---- grid-item ---- */

.grid-item {
  width: 20%;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  margin: 1%;
}

.grid-item--width2 {
  width: 18%;
}

.grid-item--width3 {
  width: 38%;
}

.grid-item--width4 {
  width: 58%;
}

.grid-item--width5 {
  width: 78%;
}

.grid-item--height2 {
  height: 200px;
}

.grid-item--height3 {
  height: 260px;
}

.grid-item--height4 {
  height: 360px;
}

.last-news-container {
  min-height: 20px;
  background-image: url("images/media-galleries-rightside.png");
  background-repeat: no-repeat;
  background-position: right;
  background-color: #0142ff;
  margin-left: -4%;
  padding-left: 15px;
}

.last-news-container span {
  color: white;
  font-family: 'Trueno';
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
}

.last-news-box span {
  color: black;
}

.last-news-title {
  color: blue;
}

.bg-masonry-1 {
  background-image: url("http://stephaniie.com/_marsh/hltv-redesign/images/masonry-1.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #0142ff;
}

.bg-masonry-2 {
  background-image: url("http://stephaniie.com/_marsh/hltv-redesign/images/masonry-2.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #0142ff;
}

.bg-masonry-3 {
  background-image: url("http://stephaniie.com/_marsh/hltv-redesign/images/masonry-3.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #0142ff;
}

.bg-masonry-5 {
  background-image: url("http://stephaniie.com/_marsh/hltv-redesign/images/masonry-5.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #0142ff;
}

.top-teams-group {
  padding-left: 4%;
  padding-right: 4%;
  min-width: 90%;
}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>




<div class="row d-flex justify-content-between">
  <div class="col-sm-2" style="min-height: 400px">
    <div class="row topic-hltv d-flex align-items-center">
      <span>Latest News</span>
    </div>
    <div class="last-news-box d-flex ">
      <div class="mr-auto p-2">USA</div>
      <div class="p-2">01h</div>
      <div class="p-2 vods-win">540</div>
    </div>

    <div class="last-news-box ">
      <div class="p-2 last-news-title">TS wins RGN Winter Classic </div>
    </div>
    <hr>

  </div>

  <div class="col-sm-9">
    <div class="grid">
      <div class="grid-sizer"></div>

      <div class="grid-item grid-item--width5 grid-item--height4 bg-masonry-1">1</div>
      <div class="grid-item grid-item--width2 grid-item--height4 bg-masonry-2">2</div>
      <div class="grid-item grid-item--width4 grid-item--height2 bg-masonry-3">3</div>
      <div class="grid-item grid-item--width3">4</div>
      <div class="grid-item grid-item--width3 grid-item--height2 bg-masonry-5">5</div>
      <div class="grid-item grid-item--width4 ">6</div>
    </div>
  </div>
</div>