Bento Grid Problem

[mint stream]

The bento grid is not displaying properly current result

Expected result

[proven creek]

For the expected result you might need to create a grid of 5 columns I think, and contribute the divs differently (grid-template-areas could be ONE approach). Currently no time for details, but this might help:
https://css-tricks.com/snippets/css/complete-guide-grid/

[mint stream]

ty

[mint stream]

Ah yes figured it out thanks so much

[covert vault]

could you help me out with this problem cuz i am not getting this figured out!

[slim fractal]

Same here 😦

[mint stream]

Either get further into the video or learn the CSS for grids and how to apply them with Tailwind

[mint stream]

Either get further into the video or learn the CSS for grids and how to apply them with Tailwind

[slim fractal]

Would be nice if we actually helped each other. Not everyone is a frontend dev

[proven creek]

If your result is not what it looks like in the video at that point, it sometimes is possible that in the video some code is already written which hadn't been shown yet.
In such cases it can be very helpful and reassuring to compare your code with the source-code which always is linked to in the video description/comments.

[mighty acorn]

Here slot this into the return() function of your export const BentoGrid() in components/ui/BentoGrid.tsx: 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>
);
};

[mint stream]

Everyone might not be a frontend dev but you should have basic understanding of what you're making especially if you plan to get a job with it

[junior tapir]

Anyone know how to fix this issue with BentoGrid ?