Question: How can I make my the height of Masonry flexible to the page? I got flexible width but height seems to be an issue. For some reason, the only width enables you to make it a percentage. Not height. I like the Blue part in the bottom of each item to follow the image if it's possible.
Codeply : https://www.codeply.com/go/AQx8CfhErq // Pressing External Viewer in there gives a clear view what I mean.
I also include a code snippet .
<!-- 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>