マテリアルデザインlite masonry layout with cards

Question

マテリアルデザインライトで「Pinterest」スタイルのレイアウトを作成しようとしています。大きな問題は、これまでのところ、同じ高さのカードでしか作成できないということです。

私はCSSと列数（MDLなし）でそれを実行できましたが、MDLが提供するスタイリングを使用したいと思います。 MDLでcolumn-countを使用すると、奇妙なレイアウトが発生します。私のカードはサイズが異なり、グリッドレイアウトがそれらの高さを均等にするので、カードの内部に大きな隙間があると悪いです。それが理にかなってほしい。必要に応じて私のWordpressのテーマコードを貼り付けることができますが、それが助けになるかどうかはわかりません。

私は、誰かがあなたがそれを行うためには、この軽量のJavaScript http://masonry.desandro.com/を使用することができます:-)

Answer 1

私を助けることができると思います。このように使用してください。

<div class="mdl-grid masonry-grid"> 
    <div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item"> 
    </div> 
    <div class="mdl-cell mdl-cell--4-col-desktop masonry-grid-item"> 
    </div> 
</div> 
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> 
<script> 
    var elem = document.querySelector('.masonry-grid'); 
    var msnry = new Masonry(elem, { 
    // options 
    itemSelector: '.masonry-grid-item' 
    }); 
</script>