如何使div的网格忽略彼此

Question

所以我有一个div网格，我用jquery的删除函数删除它。当一个div被移除时，其余的移动。有没有办法保持网格的形状，并在删除后让div保持原位？感谢。

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;
}

Answer 1

请勿删除它们，而是设置visibility: hidden;

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

Answer 2

不要删除div。您可以将一个类添加到要隐藏的div中。例如

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

然后像

那样设置类

.remove-card{
  visibility:hidden;
}

Answer 3

如果您想继续使用jQuery，可以使用不透明度函数。

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

这会使元素保持原样，但不可见。