Make COL occupy the entire space dynamically - html

Question

I have an application that list's some content on page dynamically. So we choose some achievement, and create a section that have from 1 to X achievements and on this page, they're listed using col-md-x.
I want to use the col-md-6 size, because I have some elements that's dynamic and I need some space to show it.
But my problem here is, I want to make the columns to use the empty space, for example this image:
The red area, below section 'informe um nome2' isn't occupied, but I want to show the third, 'informe um nome3' below this section and use the free space.
Here's my current code:
<div class="row col-md-12">
#foreach (var item in Model)
{
<div class="col-md-6" style="margin-bottom:20px">
<div class="card">
#if (item.SectionHeader != null)
{
<div class="card-header text-center" style="height: 120px; background-image: url('#item.SectionHeader.ImageURL'); background-size:cover; color:black">
#item.SectionName <a title="Renomear" ng-click="Rename(#item.SectionID)"><i class="fa fa-xs fa-clipboard" style="cursor:pointer"></i></a> <a title="Baixar arquivo da seção" ng-click="DownloadFiles(#item.SectionID, false)"><i class="fa fa-xs fa-download" style="cursor:pointer; color:green"></i></a> <a title="Apagar seção" ng-click="Delete(#item.SectionID)"><i class="fa fa-xs fa-trash" style="cursor:pointer; color:red"></i></a>
</div>
}
else
{
<div class="card-header text-center">
#item.SectionName <a title="Editar" href="#Url.Action("EditSection", "Guides", new { sectionID = item.SectionID })"><i class="fa fa-xs fa-edit" style="cursor:pointer; color:orange"></i></a> <a title="Renomear" ng-click="Rename(#item.SectionID)"><i class="fa fa-xs fa-clipboard" style="cursor:pointer"></i></a> <a title="Baixar arquivo da seção" ng-click="DownloadFiles(#item.SectionID, false)"><i class="fa fa-xs fa-download" style="cursor:pointer; color:green"></i></a> <a title="Apagar seção" ng-click="Delete(#item.SectionID)"><i class="fa fa-xs fa-trash" style="cursor:pointer; color:red"></i></a>
</div>
}
<div class="card-body">
#foreach (var chievo in item.GameAchievements.OrderBy(f => f.SectionOrder.HasValue ? f.SectionOrder : f.AchievementID))
{
<div class="achievement" id="#chievo.AchievementID" style="margin-top:10px; margin-bottom:10px; z-index:1; height:60px">
<ul style="list-style:none; margin-top:20px; padding-left:0px" id="#chievo.AchievementID">
<img src="#chievo.Icon" style="float:left" />
<b> #chievo.DisplayName</b>
<br />
#if (string.IsNullOrEmpty(chievo.Description))
{
 <i class="fa fa-edit" style="cursor:pointer" ng-click="OpenModal(#chievo.AchievementID)"></i>
}
else
{
 <i>#chievo.Description</i>
}
<div style="float:right" class="text-center">
<a title="Alterar Dificuldade" ng-click="ChangeDifficulty(#chievo.AchievementID)"><i class="fa fa-xs fa-star" style="cursor:pointer; margin-left:10px; color:orange"></i></a>
<a title="Remover da Seção" ng-click="RemoveFromSection(#chievo.AchievementID)"><i class="fa fa-xs fa-trash-alt" style="cursor:pointer; margin-left:10px; color:red"></i></a>
</div>
#if (chievo.Difficulty != null)
{
<img src="#chievo.Difficulty.DifficultyImage" style="float:right; width:32px" />
}
</ul>
</div>
if (item.SectionDivisor != null && (item.IndividualDivisor.HasValue && item.IndividualDivisor.Value == true))
{
<div class="text-center">
<img src="#item.SectionDivisor.DivisorImageURL" />
</div>
}
}
#if (item.SectionDivisor != null && (item.IndividualDivisor.HasValue && item.IndividualDivisor.Value == false))
{
<div class="text-center" style="margin-top:20px">
<img src="#item.SectionDivisor.DivisorImageURL" />
</div>
}
</div>
</div>
</div>
}
</div>
So, basically, I want help making the columns auto-align and auto-fill.
I'm using sb admin 2 free template version.

Answer 1

In this case that won't work as desired, because the elements follow a row column distribution and when two elements fill a row, the next element goes all the way down to the space the longest element of the first two occupies and starts there.
What you could use in this case is something like Isotope using the horizontal masonry layout. You can check more on this on Isotope's docs.
If you still prefer to use the bootstrap option I would recommend you define a height for each column and make it scrollable. That would be the easiest way to order them visually.