How to add masonry grid on html with bootstrap or without bootstrap

How to add masonry grid on HTML with bootstrap or without bootstrap

If you already know what is masonry grid then this post will help you to add masonry JS & CSS to your HTML code very quickly.

If you don’t know what is masonry then don’t worry. We discuss everything very clearly.

Let’s jump to the post:

Masonry is such a grid system where div/images or other HTML element keeps side by side together on both sides.

Here is an example of a masonry grid with images:

You can use your content with the div.

In bootstrap, we can use card for the grid. It will be easier to add title, body, images, etc in an easy way.

Here is the code:

First of all, you need to download the mesorny library from this source

https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js

then you need to write your HTML masonry code like this:

                                  <h5 class=”card-title”>Card title</h5>

                                  <p class=”card-text”>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>

                                  <a href=”#” class=”btn btn-primary”>Go somewhere</a>

                              </div>

                          </div>

                          <div class=”card col-md-4 col-sm-6 p-4″>

                              <img src=”images/home/pro_1.png” alt=”image” class=”card-img-top”>

                              <div class=”card-body”>

                                  <h5 class=”card-title”>Card title</h5>

                                  <p class=”card-text”>Some quick example text to k of the card’s content.</p>

                                  <a href=”#” class=”btn btn-primary”>Go somewhere</a>

                              </div>

                          </div>

                          <div class=”card col-md-4 col-sm-6 p-4″>

                              <img src=”images/home/pro_2.png” alt=”image” class=”card-img-top”>

                              <div class=”card-body”>

                                  <h5 class=”card-title”>Card title</h5>

                                  <p class=”card-text”>Some quick example text to build on the card title example text to build otext to build on the card title example text to build otext to build on the card title example text to build on the card title and make up the bulk of the card’s content.</p>

                                  <a href=”#” class=”btn btn-primary”>Go somewhere</a>

                              </div>

                          </div>

                          <div class=”card col-md-4 col-sm-6 p-4″>

                              <img src=”images/home/pro_3.png” alt=”image” class=”card-img-top”>

                              <div class=”card-body”>

                                  <h5 class=”card-title”>Card title</h5>

                                  <p class=”card-text”>Some quick example text to  of the card’s content.Some quick example text to  of the card’s content.</p>

                                  <a href=”#” class=”btn btn-primary”>Go somewhere</a>

                              </div>

                          </div>

                          <div class=”card col-md-4 col-sm-6 p-4″>

                              <img src=”images/home/pro_4.png” alt=”image” class=”card-img-top”>

                              <div class=”card-body”>

                                  <h5 class=”card-title”>Card title</h5>

                                  <p class=”card-text”>Some quick example text to build on the card title and make up texample text to build on the card title and make up texample text to build on the card title and make up texample text to build on the card title and make up texample text to build on the card title and make up the bulk of the card’s content.</p>

                                  <a href=”#” class=”btn btn-primary”>Go somewhere</a>

                              </div>

                          </div>

                          <div class=”card col-md-4 col-sm-6 p-4″>

                              <img src=”images/home/pro_5.png” alt=”image” class=”card-img-top”>

                              <div class=”card-body”>

                                  <h5 class=”card-title”>Card title</h5>

                                  <p class=”card-text”>Some quick example text to build on the card title and make up the bulk ard title and make up the bulk of the card’s content.</p>

                                  <a href=”#” class=”btn btn-primary”>Go somewhere</a>

                              </div>

                          </div>

                          <div class=”card col-md-4 col-sm-6 p-4″>

                              <img src=”images/home/pro_6.png” alt=”image” class=”card-img-top”>

                              <div class=”card-body”>

                                  <h5 class=”card-title”>Card title</h5>

                                  <p class=”card-text”>Some quick exampletent.</p>

                                  <a href=”#” class=”btn btn-primary”>Go somewhere</a>

                              </div>

                          </div>

                          <div class=”card col-md-4 col-sm-6 p-4″>

                              <img src=”images/home/pro_1.png” alt=”image” class=”card-img-top”>

                              <div class=”card-body”>

                                  <h5 class=”card-title”>Card title</h5>

                                  <p class=”card-text”>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>

                                  <a href=”#” class=”btn btn-primary”>Go somewhere</a>

                              </div>

                          </div>

                      </div>

                  </div>

                </div>

</div>

After that you need to link the js and call it like this.

<script>
// init Masonry
var $grid = $(‘.masonry-container’).masonry({
itemSelector: ‘.card’,
// use element for option
columnWidth: ‘.card’,
percentPosition: true
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry(‘layout’);
});
</script>

Here is our output.

If you are not using the bootstrap then you can set custom with percentage. like this:

<style>

.card{

  float: left;

  width: 33.33%;

  border: 2px solid hsla(0, 0%, 0%, 0.5);

}

.grid-item–width2 { width: 50%; }

</style>

This is the end of our masonry grid tutorial with card and images.

Hope you love this tutorial.

Please make sure you share this with your friends.

If you can’t understand anything just comment. I will reply as soon as possible.

Or if you looking someone to do this for you just contact us.

We do custom work.

Thank you 🙂