Требуется расположение div, как показано на скриншоте

Question

Я работаю над расширением хром. Есть n блоков div. Это число блоков div зависит от URL-адреса, который я собираюсь посетить. Так что на некоторых страницах видимые блоки могут быть 1,2,3,4,5, а на другом они могут быть 1,5 или 1,2,5. Итак, мой div's должен занимать пространство и не оставлять пустое место.

Выход мне нужно:

Это то, что я пытался (и на jsfiddle), но проблема в пустое пространство ниже красного цвета.

div { 
 
    float: left; 
 
    width: 200px; 
 
} 
 
.One { 
 
    background-color: Red; 
 
    height: 200px; 
 
} 
 
.Two { 
 
    background-color: Green; 
 
    height: 400px; 
 
} 
 
.Three { 
 
    background-color: Blue; 
 
    height: 500px; 
 
} 
 
.Four { 
 
    background-color: Orange; 
 
    height: 700px; 
 
} 
 
.Five { 
 
    background-color: Yellow; 
 
    height: 200px; 
 
} 
 
.Six { 
 
    background-color: Pink; 
 
    height: 400px; 
 
} 
 
.Seven { 
 
    background-color: Grey; 
 
    height: 600px; 
 
}

<div class="One"> 
 
</div> 
 
<div class="Two"> 
 
</div> 
 
<div class="Three"> 
 
</div> 
 
<div class="Four"> 
 
</div> 
 
<div class="Five"> 
 
</div> 
 
<div class="Six"> 
 
</div> 
 
<div class="Seven"> 
 
</div>

Answer 1

HTML

<article> 
    <section> 
    <p class="sect1">1</p> 
    </section> 
    <section> 
    <p class="sect2">2</p> 
    </section> 
    <section> 
    <p class="sect3">3</p> 
    </section> 
    <section> 
    <p class="sect4">4</p> 
    </section> 
    <section> 
    <p class="sect5">5</p> 
    </section> 
    <section> 
    <p class="sect6">6</p> 
    </section> 
    <section> 
    <p class="sect7">7</p> 
    </section> 
    <section> 
    <p class="sect8">8</p> 
    </section> 
    <section> 
    <p class="sect9">9</p> 
    </section> 
    <section> 
    <p class="sect10">10</p> 
    </section> 
</article> 

CSS

*, *:before, *:after {box-sizing: border-box !important;} 

article { 
-moz-column-width: 10em; 
-webkit-column-width: 10em; 
-moz-column-gap: 1em; 
-webkit-column-gap: 1em; 

} 

section { 
display: inline-block; 
margin: 0.25rem; 
padding: 1rem; 
width: 100%; 
background: #efefef; 
} 

p { 
min-width: 200px; 
margin: 1rem 0; 
} 

.sect1{ min-height: 100px; } 
.sect2{ min-height: 200px; } 
.sect3{ min-height: 300px; } 
.sect4{ min-height: 300px; } 
.sect5{ min-height: 500px; } 
.sect6{ min-height: 600px; } 
.sect7{ min-height: 200px; } 
.sect8{ min-height: 400px; } 
.sect9{ min-height: 400px; } 
.sect10{ min-height: 400px; } 

Вот ссылка: https://jsfiddle.net/JPratik2712/huLkhpux/