Issue in BentoGrid

[Imadh-Ifham]

I am having an issue with BentoGrid. I followed the same code from the you-tube video but my layout seems different. lg:col-span-3 cover the full width in lg screen. I tried nesting it into a div having a className with grid grid-cols-* but still i didn't match the requirements

[sam-arth07]

Same issue occuring on my end. If somebody finds a fix please update.

[shauryaa19]

Solution to this issue is already updated in the codebase itself. Just move to components/ui/BentoGrid.tsx and there you will find the following code snippet:

export const BentoGrid = ({
  className,
  children,
}: {
  className?: string;
  children?: React.ReactNode;
}) => {
  return (
    <div
      className={cn(
        // change gap-4 to gap-8, change grid-cols-3 to grid-cols-5, remove md:auto-rows-[18rem], add responsive code
        "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>
  );
};

Grid styles are updated here, which is not mentioned in the video. Just copy and paste this into your codebase.

[shahnoorgit]

Solution to this issue is already updated in the codebase itself. Just move to components/ui/BentoGrid.tsx and there you will find the following code snippet:

export const BentoGrid = ({
  className,
  children,
}: {
  className?: string;
  children?: React.ReactNode;
}) => {
  return (
    <div
      className={cn(
        // change gap-4 to gap-8, change grid-cols-3 to grid-cols-5, remove md:auto-rows-[18rem], add responsive code
        "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>
  );
};

Grid styles are updated here, which is not mentioned in the video. Just copy and paste this into your codebase.

still same problem actually bentogrid is working correctly on local but when deployed to vercel its not styling correctly

[Abishekkmadhu]

So i did the same thing given above but for me too it didnt work. so i initialized the classname in the bentogriditem function itself
Use this function instead of calling item.classname and pass index i into this function

 export const getClassName = (index : number) => {
    if (index === 0 || index === 4) {
        return "md:col-span-2 md:row-span-2 lg:min-h-[60vh]";
      }
      if (index === 1 || index === 2 || index === 3 || index === 5) {
        return "md:col-span-2 md:row-span-1";
      }
      return "";
}

    you can customize the condition as required.
    and in the ui/bentogrid.tsx file i have given the lg-col-span-3 so there will be 3 columns per row for a cleaner look 
    Hope this helps you.

[167-RIAZ]

not at all, This problem can't be resolved Yet
// ui/BentoGrid.tsx
import { cn } from "@/lib/utils";

export const getClassName = (index: number): string => { // Added type annotation for index and return type
if (index === 0 || index === 4) {
return "md:col-span-2 md:row-span-2 lg:min-h-[60vh]";
}
if (index === 1 || index === 2 || index === 3 || index === 5) {
return "md:col-span-2 md:row-span-1";
}
return "";
};

export const BentoGrid = ({
className,
children,
}: {
className?: string;
children?: React.ReactNode;
}) => {
return (
<div
className={cn(
"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-8 mx-auto",
className
)}
>
{children}

);
};

export const BentoGridItem = ({
className,
title,
description,
header,
icon,
id,
}: {
className?: string;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
header?: React.ReactNode;
icon?: React.ReactNode;
id: number,
}) => {
return (
<div
className={cn(
"relative rounded-3xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-white border border-transparent justify-between flex flex-col space-y-4",
className
)}
>
{header}

{icon}

{title}

{description}

);
};