CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
Code Fingers
Code Fingers

Reputation: 301

How to fill the empty spaces in the grid in HTML?

As I am displaying the notes on my note taking app, which is a grid, if I have a short note then there is empty space left. How can fill it up by pushing the cards below to go up and stick to card on the top. I am using bootstrap's grid layout for displaying the cards:- See here

I also have the screenshot of how the cards are looking currently. Screenshot

You can see that there is a gap between the cards and I want to fill it up

Also here is the template of a single card

    let cardTemplate = `<div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">${title.value}</h5>
                        <p class="card-text">
                            ${content.value}
                        </p>
                        <a href="#" class="btn btn-outline-primary showBtn">Show More</a>
                        <a href="#" class="btn btn-outline-danger deleteBtn">Delete</a>
                        <a href="#" class="btn btn-outline-success editBtn">Edit</a>
                    </div>
                </div>
            </div>`;

and i am putting this card in a div whenever a button is clicked

        <!--displaying notes-->
        <div class="row"></div>

I have not done any css on the div since I like the looks as it is. Thanks for reading my query!

Upvotes: 0

Views: 675

Answers (2)

Yong
Yong

Reputation: 1685

I think what you're looking for is masonry. It's a grid property that allows that exact behavior that you are looking for. It can be done with grid-template-rows:masonry;. Here is a link that would tell you exactly how you can do it.

Upvotes: 2

Latha Nithin
Latha Nithin

Reputation: 41

Try adding class h-100 inside<div class="card h-100">** or h-50 or h-25,which makes an element or div as tall with height utilities. it is readily available in bootstrap.

refer this link for getting more information about pre-defined sizes classes in bootstrap

Upvotes: 1

Related Questions