Css 寻找组件中最大的元素来设置其他组件的高度

有一个组件映射卡元素，如下所示:

如你所见，最上面、最左边的卡片比其他卡片少了一些高度.我怎么才能找到最高组件的高度，并将其他组件的高度设置为该高度？这就是我能想到的，但它不起作用，我假设它无法访问渲染的实际大小？:

代码:

const [maxHeight, setMaxHeight] = useState<number | undefined>();
  useEffect(() => {
    const cards = document.querySelectorAll(".card");
    cards.forEach((card) => {
      if (maxHeight) {
        if (card.getBoundingClientRect().height > maxHeight) {
          setMaxHeight(card.getBoundingClientRect().height);
        }
      }
    });
  }, []);
  

  return (
    <div className="grid grid-cols-1 gap-6 px-2 mx-auto md:grid-cols-3">
      {BestPractices.map((bestPractice) => (
        <Link href={bestPractice.href} key={bestPractice.name}>
          <div
            style={{ height: maxHeight }}
            className="relative p-6 transition-all ease-in-out border rounded-lg drop-shadow-card duration-120 hover:border-brand-dark border-slate-100 bg-slate-100 hover:scale-105 hover:cursor-pointer dark:border-slate-600 dark:bg-slate-800">
            <div
              className={clsx(
                // base styles independent what type of button it is
                "absolute right-6 rounded-full px-3 py-1 text-xs lg:text-sm",
                // different styles depending on type
                bestPractice.category === "Boost Retention" &&
                  "bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",
                bestPractice.category === "Increase Revenue" &&
                  "bg-blue-100 text-blue-500 dark:bg-blue-800 dark:text-blue-200",
                bestPractice.category === "Understand Users" &&
                  "bg-orange-100 text-orange-500 dark:bg-orange-800 dark:text-orange-200"
              )}>
              {bestPractice.category}
            </div>
            <div className="w-12 h-12">
              <bestPractice.icon className="w-12 h-12 " />
            </div>
            <h3 className="mt-3 mb-1 text-xl font-bold text-slate-700 dark:text-slate-200">
              {bestPractice.name}
            </h3>
            <p className="text-sm text-slate-600 dark:text-slate-400">{bestPractice.description}</p>
          </div>
        </Link>
      ))}
    </div>
)

编辑:使用服务器组件.