Material design lite masonry layout with cards -
i'm trying create "pinterest" style layout material design lite. big issue far, i'm able create cards being same height.
i have been able css , column count (without mdl), i'd use styling mdl provides. if use column-count mdl, cause weird layout. cards vary in size, , looks bad when have huge gaps inside them because gridlayout evens them out in height. hope makes sense. can paste wordpress theme code if necessary, i'm not sure if it's help.
i hope can me out :-)
you can use lightweight javascript http://masonry.desandro.com/ in order that. use this.
<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>
Comments
Post a Comment