用JS过滤后对齐卡片

Answer 1

您希望在

display: none

元素的父级

<a>

元素上切换

.card

，而不是

.card

元素本身。这是因为当其子元素

<a>

设置为

.card

时，

display: none

元素仍然“存在”并占用网格空间。

因此，您可以将 JavaScript 稍微修改为：

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