Here is one option using wrapped columns, but it requires a fixed height. .card-container { display: flex; flex-flow: column wrap; height:100vh; align-items: center; background-color: #888; } A better option for CSS masonry layout is to use columns, an example is on this blog post http://w3bits.com/css-masonry/ .masonry { /* Masonry container */ -moz-column-count: 4; -webkit-column-count: 4; … Read more
As explained in the Bootstrap 5 docs, the Masonry JS plugin is the recommended option for this type of “Pinterest” layout. The multi-column card layout (card-columns) that was used in Bootstrap 4 is no longer available in Bootstrap 5. Using the Masonry plugin is easy. Just use the appropriate col-* class to set the number … Read more
as per documentation, var elem = document.querySelector(‘.grid’) Masonry(elem, { itemSelector: ‘.grid-item’, columnWidth: ‘.grid-sizer’, percentPosition: true }) Should be: var elem = document.querySelector(‘.grid’) var msnry = new Masonry( elem, { itemSelector: ‘.grid-item’, columnWidth: ‘.grid-sizer’, percentPosition: true });
We did this on a site, and what we did was put the grid in vertical rows. Example: <div class=”row”> <div class=”col-lg-4″> <div class=”box”></div> <div class=”box”></div> <div class=”box”></div> </div> <div class=”col-lg-4″> <div class=”box”></div> <div class=”box”></div> <div class=”box”></div> </div> <div class=”col-lg-4″> <div class=”box”></div> <div class=”box”></div> <div class=”box”></div> </div> <div>