使用JS过滤后实现Grid布局卡片自动对齐的解决方案

问题根源 #

你的Grid容器（.cards）直接子元素是包裹卡片的<a>标签，当前JS代码操作的是内部的.card元素显示隐藏——外层的<a>依然会占据Grid布局的位置，所以过滤后会留下空位。

修复方案 #

直接控制Grid容器的子元素（即每个<a>标签）的显示隐藏，让Grid布局自动重新排列剩余元素：

修改后的JavaScript代码

const buttons = document.querySelectorAll(".btn-category");
// 选择Grid容器下的所有a标签（Grid的直接子项）
const cardWrappers = document.querySelectorAll(".cards > a");
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");
    const category = button.getAttribute("data-category").toUpperCase();

    cardWrappers.forEach((wrapper) => {
      // 去除文本前后空格，避免匹配失败
      const cardCategory = wrapper.querySelector(".badge span").innerText.trim().toUpperCase();
      if (category === "ALL" || cardCategory === category) {
        // 移除Tailwind隐藏类，显示元素
        wrapper.classList.remove("hidden");
      } else {
        // 添加Tailwind隐藏类，隐藏元素
        wrapper.classList.add("hidden");
      }
    });
  });
});

额外说明 #

1. 用Tailwind的hidden类替代直接修改style.display，更符合项目的Tailwind使用规范，也便于维护。
2. 给cardCategory加上trim()是因为你的HTML里<span>标签前有空格，避免因空格导致分类匹配失败。
3. 这样修改后，隐藏的是Grid布局的直接子项，剩余元素会自动填充Grid的空位，保持布局整齐。

内容的提问来源于stack exchange，提问作者Blagoj