设置 style.display= none 后优雅的 javascript 重新调整

我正在尝试制作一些代码来删除网页上卡片中表示的项目。

当用户单击 remove-item-btn 时，将调用 ajax，这将删除后端中的项目。在前端，项目的显示更改为无，因此它消失了。所有这些都运作良好。在瞬间，该项目从网格中消失，后面的项目已填充其位置。

问题：是否可以编写 javascript 来使其他卡优雅地移动以填充空白空间？

我正在使用bootstrap，sass，ruby on rails和htmlslim。

这些卡片目前位于一个网格中，该网格的宽度根据屏幕尺寸而变化，网格的平均宽度为 3 张卡片。

.HTML

<div class="item-card" id="2">...</div>
<div class="item-card" id="3">...</div>
<div class="item-card" id="4">...</div>
<div class="item-card" id="5">...</div>
<div class="item-card" id="6">...</div>
<div class="item-card" id="7">...</div>

.JS

$('.remove-item-btn').mousedown(function(ev) {
  var item_card = document.getElementById(...);
  item_card.style.display = 'none'
  $.ajax(this removes the item)
});

.CSS

.item-card {
  ...
  display: inline-block;
  ...
}