Masonary with responsive
Wed Sep 28 2022 06:44:15 GMT+0000 (Coordinated Universal Time)
Saved by
@jaysoni123
#javascript
#jquery
// CSS
.blog-home-section{padding:0 0 70px;}
.blog-home-section .blog-clm{width: 100%;}
.blog-home-section .card-blog{float: left;margin:75px 10px 12px;width:calc(33.33% - 20px)!important;border:0;border-radius:6px;color:rgba(0,0,0,0.87);background:#fff;box-shadow:0 2px 2px 0 rgb(0 0 0 / 14%),0 3px 1px -2px rgb(0 0 0 / 20%),0 1px 5px 0 rgb(0 0 0 / 12%);}
//JS
$('#load-data').isotope({
itemSelector: '.card-blog',
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: '.card-blog'
}
});
// Script
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
content_copyCOPY
Comments