CODEWITHSUNDEEP
javascripthtmlcss
Will
Will

Reputation: 165

How to make grid of divs ignore eachother

So I have a grid of divs that I am removing with jquery's remove function. When one div is removed, the rest move. Is there a way to keep the grid's shape, and have the divs stay in place upon removal? Thanks.

LINK - https://jsfiddle.net/n4y6sfg6/7/

.boards{
    height:630px;
    width:630px;
    background-color:orange;
    border-radius:5px;
    left:50%;
    margin-left:-315px;
    position:relative;
}
.row{
    width:100%;
    height:157.5px;
}

.cards{
    width:120px;
        height:125px;
        display:inline-block;
        margin:16px;
        border-radius: 5px;
        background-color:grey;
    vertical-align:top;
}

Upvotes: 0

Views: 100

Answers (3)

Shadow
Shadow

Reputation: 9427

If you want to continue to use jQuery, you could use the opacity function.

$("#element").opacity(0);

This will leave the element exactly where it is, but invisible.

Upvotes: 1

Abraham
Abraham

Reputation: 11

Don't remove div.You can add a class to the div that you want to hide.For example

<div class="cards remove-card"></div>

then style the class like

.remove-card{
  visibility:hidden;
}

Upvotes: 1

connexo
connexo

Reputation: 56753

Don't remove them, instead set visibility: hidden;

https://jsfiddle.net/n4y6sfg6/14/

Upvotes: 1

Related Questions