MaterializeCSS - 高さの異なるグリッドレイアウト

Question

マテリアライズCSSは、たとえばマテリアルデザインをサポートしているため、マテリアライズCSSがブートストラップよりも好きです。私はこれまでのところ本当に好きです、それはjavascriptセクションでさえ多くの役に立つコンポーネントを持っています。しかし、私が一番欠けているのは、高さの異なる動的グリッドレイアウトです。あなたが私の英語を取得しない場合は、画像を見てください。私はそれを図1のようにしたいと思います。別のJavaScriptフレームワーク/ライブラリを使用せずにそれを行う方法はありますか？

Answer 1

純粋なCSSのソリューションは、columnプロパティを使用することであろう。

しかし、内側のdivの幅が同じ場合にのみ機能することに注意してください。

HTML

<section> 
    <img src="path" /> 
    <img src="path" /> 
    <img src="path" /> 
    <img src="path" /> 
</section> 

CSS

body{ 
    margin: 0; 
} 

section{ 
    column-width: 300px; 
    column-gap: 5px; 
    padding: 5px; 
} 

section img{ 
    width: 100%; 
} 

デモ

Pen