使用 JS 过滤后对齐卡片

问：

当我用 JS 过滤卡片并隐藏其中一些卡片时，我希望剩余的卡片取而代之。

<div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 cards">
  <?php foreach($books as $book):?>
    <a href="/Books/book.php?id=<?php echo $book['id']; ?>">
      <div class="card hover:scale-110 transition duration-500 cursor-pointer">
        <img src="<?php echo $book['img_url']; ?>" alt="Book Image" class="mb-2 rounded-md w-  full h-80 object-fill">
        <h2 class="font-bold mb-2 ml-2"> <?php echo $book['book_title'] ?></h2>
        <p class="pb-5 ml-2"> <?php echo $book['author_name']?></p>
        <div class="badge">
          <svg
              class="w-5 inline-block h-6"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              >
              <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
              />
              <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6 6h.008v.008H6V6z"
              />
          </svg>
          <span> <?php echo $book['category_title'] ?></span>
        </div>
      </div>
    </a>
  <?php endforeach; ?>
</div>

const buttons = document.querySelectorAll(".btn-category");
const cards   = document.querySelectorAll(".card");
const showAll = document.querySelector(".show-all");

buttons.forEach((button) => {
  button.addEventListener("click", function () {
    showAll.classList.remove("bg-white", "text-green-600", "border", "btn");
    button.classList.add("bg-white", "text-green-600", "border", "btn");
    category = button.getAttribute("data-category").toUpperCase();
    console.log(category);

    cards.forEach((card) => {
      const cardCategory = card.querySelector(".badge span").innerText;
      if (category === "All" || cardCategory === category) {
        card.style.display = "block";
      } else {
        card.style.display = "none";
      }
    });
  });
});

我尝试将显示更改为内联块，但没有成功。我可能会使用 flex 方法做到这一点，但会用 grid 方法做到这一点。正如你所看到的，我在我的文件中使用了顺风。对于这个项目，我只能使用 ， ， 不能使用 React。index.phpJSjQuery

它不应该是这样的：

对于所有卡片，它应该是这样的：