アイテムの高さに関係なく、要素を上下に配置する方法はありますか？

Question

アイテムの高さに関係なく、要素を上下に配置する方法はありますか？次のように要素を配置するために、次のマークアップを持つよう：

.photo { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    max-width: 160px; 
 
    width: 100%; 
 
    margin: 0px 20px 20px 0; 
 
    background:red; 
 
}

<div class="photo"> 
 
    <div class="photo__item photo__item_1"></div> 
 
</div> 
 
<div class="photo"> 
 
    <div class="photo__item photo__item_2"></div> 
 
</div> 
 
<div class="photo"> 
 
    <div class="photo__item photo__item_3"></div> 
 
</div> 
 
<div class="photo"> 
 
    <div class="photo__item photo__item_4"></div> 
 
</div> 
 
<div class="photo"> 
 
    <div class="photo__item photo__item_5"></div> 
 
</div> 
 
<div class="photo"> 
 
    <div class="photo__item photo__item_6"></div> 
 
</div>

Answer 1

これを行う方法はいくつかあります。 CSS columnプロパティを使用してこの効果

1. エミュレートは、私はたとえば、あなたは要素が配置されているかを確認することができthis fiddleました。

   他の方法（最も実用的だと思います）は、@ kukkuzが言ったようにmasonryのようなプラグインを使用することです。

2. javascriptとcssを使用して独自のグリッドを作成すると、他の要素の位置に基づいて各要素を配置することができます（これはお勧めできません）。