Expandable Card Pattern

Build smooth expand/collapse animations using CSS grid-rows, avoiding height:auto animation issues.

Why grid-rows?

Traditional height animation requires explicit pixel values. The grid-rows technique allows smooth animation to/from auto height:

• grid-rows-[0fr] + overflow-hidden = collapsed (0 height)
• grid-rows-[1fr] = expanded (natural height)

Core Implementation

"use client";

import { useState } from "react";
import { ChevronDown } from "lucide-react";