画像でCSSの列が動作しない

Question

高さが異なる4つの画像があり、CSS列を使用して石積みのような列のグリッドを作成したいと考えています。私は下の列に3枚のトップでの画像と第4画像を望ん

https://codepen.io/glennreyes/pen/pwjOmy

.columns { 
 
    columns: 3; 
 
}

<div class="columns"> 
 
    <img class="image" src="http://lorempixel.com/400/400" alt="" /> 
 
    <img class="image" src="http://lorempixel.com/400/500" alt="" /> 
 
    <img class="image" src="http://lorempixel.com/400/600" alt="" /> 
 
    <img class="image" src="http://lorempixel.com/400/400" alt="" /> 
 
</div>

：columns 3に設定する場合は、次のCodePen例では3番目の列を満たしません。上/左/下/右のコンテンツを石工スタイルで正しく埋めるために欠けているものは何ですか？

Answer 1

問題の原因は画像のdisplayです。

イメージは、デフォルトでdisplay: inlineです。

display: blockに切り替えると、columnプロパティが機能します。

revised codepen