#BentoGrid not working properly!

7 messages · Page 1 of 1 (latest)

river agate
#

Happened to me too. But I fixed smth. I forgot what I did 🪦

mystic kernel
#

let me know if you remember, kinda stuck on this 😐

drowsy pilot
#

can u share ur "BentoGrids.tsx"

reef totem
# mystic kernel let me know if you remember, kinda stuck on this 😐

"import { useState } from "react";
import { IoCopyOutline } from "react-icons/io5";

import { cn } from "@/utils/cn";

export const BentoGrid = ({
className,
children,
}: {
className?: string;
children?: React.ReactNode;
}) => {
return (
<div
className={cn(

    "grid grid-cols-1 md:grid-cols-6 lg:grid-cols-5 md:grid-row-7 gap-4 lg:gap-8 mx-auto",
    className
  )}
>
  {children}
</div>

);
};

export const BentoGridItem = ({
className,
id,
title,
description,

img,
imgClassName,
titleClassName,
spareImg,
}: {
className?: string;
id: number;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
img?: string;
imgClassName?: string;
titleClassName?: string;
spareImg?: string;
}) => {

return (
<div
className={cn(

    "row-span-1 relative overflow-hidden rounded-3xl border border-white/[0.1] group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none justify-between flex flex-col space-y-4",
    className
  )}
  style={{
  
    background: "rgb(4,7,29)",
    backgroundColor:
      "linear-gradient(90deg, rgba(4,7,29,1) 0%, rgba(12,14,35,1) 100%)",
  }}
>


    <div
      className={cn(
        titleClassName,
        "group-hover/bento:translate-x-2 transition duration-200 relative md:h-full min-h-40 flex flex-col px-5 p-5 lg:p-10"
      )}
    >
    
      <div className="font-sans font-extralight md:max-w-32 md:text-xs lg:text-base text-sm text-[#C1C2D3] z-10">
        {description}
      </div>

      <div
        className={`font-sans text-lg lg:text-3xl max-w-96 font-bold z-10`}
      >
        {title}
      </div>

   

        </div>
    
    </div>

);
};" copy this and it should solve your prolem

drowsy pilot
reef totem