#BentoGrid not working properly!
7 messages · Page 1 of 1 (latest)
let me know if you remember, kinda stuck on this 😐
ya the layout shown on the video vs the code they write are different
can u share ur "BentoGrids.tsx"
"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
this layout works,can u share the file where u have all the imagees and the 3d globe
the 3d file yes but the images i have changed alot so its not like his at all