bento-grid

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {
5  children: React.ReactNode;
6}
7 
8const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(
9  ({ className, children, ...props }, ref) => {
10    return (
11      <div
12        ref={ref}
13        className={cn(
14          "grid auto-rows-[minmax(180px,1fr)] grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
15          className,
16        )}
17        {...props}
18      >
19        {children}
20      </div>
21    );
22  },
23);
24BentoGrid.displayName = "BentoGrid";
25 
26export { BentoGrid };