<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> <h1>Isotope - masonry layout mode</h1> <div class="grid"> <div class="grid-item grid-item--width2 grid-item--height2"></div> <div class="grid-item grid-item--width2"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item"></div> <div class="grid-item grid-item--width3 grid-item--height3"></div> <div class="grid-item"></div> <div class="grid-item grid-item--width2 grid-item--height2"></div> <div class="grid-item grid-item--width2"></div> <div class="grid-item grid-item--width2"></div> <div class="grid-item grid-item--width3 grid-item--height3"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item grid-item--width2"></div> <div class="grid-item grid-item--width2"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item--width3 grid-item--height3"></div> <div class="grid-item"></div> <div class="grid-item grid-item--width3"></div> <div class="grid-item grid-item--width2 grid-item--height2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div> <div class="col-12 copy-right text-center">© Friday, March 1, 2024 quanth</div>

* { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ h1 { text-align: center; } .grid { background: #DDD; max-width: 1200px; margin: auto; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-item { float: left; width: 100px; height: 100px; background: #0D8; border: 2px solid #333; border-color: hsla(0, 0%, 0%, 0.7); } .grid-item--width2 { width: 200px; } .grid-item--height2 { height: 200px; } .grid-item--width3 { width: 300px; } .grid-item--height3 { height: 300px; }

// external js: isotope.pkgd.js $('.grid').isotope({ itemSelector: '.grid-item', layoutMode: 'masonry', masonry: { columnWidth: 100 } });