Finding the biggest element of a component to set the height of others

Issue

There a component mapping card elements that look like this:

As you can see, the topmost, leftmost card is missing some height compared to others. How can I find the height of the highest components and set other's height to that? This is what I was able to come up with but it does not work, I assume it does not have access to the actual size that gets rendered?:

Code:

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>
)

EDIT: Using server components.

Solution

There's no need to control the height via JS. CSS can do this for you.

Place block class on <Link /> and h-full on its immediate child. And remove style, of course.

Answered By - tao