The Colourful Bento Grid
Visit Source of Grid
Tags
Light ModeMediumLightRyzeColorfulDesignInterlocking
Source Code
1
2
3
4
5
6
7
RyzeGrid.jsx
1export default function RyzeGrid() {
2 return (
3 <div className="grid grid-cols-1 md:grid-cols-6 md:grid-rows-9 gap-4 w-full p-4 h-auto md:h-[700px] lg:h-[800px]">
4 {/* Mobile: Stacked 1-column layout
5 Tablet (md) & Desktop (lg): 6-column, 9-row asymmetrical dashboard */}
6
7 {/* Left Column Stack */}
8 <div className="h-64 md:h-auto md:col-span-2 md:row-span-5 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
9 1
10 </div>
11 <div className="h-48 md:h-auto md:col-span-2 md:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
12 2
13 </div>
14
15 {/* Right Side - Top Wide */}
16 <div className="h-40 md:h-auto md:col-span-4 md:row-span-3 md:col-start-3 md:row-start-1 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
17 3
18 </div>
19
20 {/* Right Side - Middle Pair */}
21 <div className="h-40 md:h-auto md:col-span-2 md:row-span-3 md:col-start-3 md:row-start-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
22 4
23 </div>
24 <div className="h-40 md:h-auto md:col-span-2 md:row-span-3 md:col-start-5 md:row-start-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
25 5
26 </div>
27
28 {/* Right Side - Bottom Pair */}
29 <div className="h-40 md:h-auto md:col-span-2 md:row-span-3 md:col-start-3 md:row-start-7 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
30 6
31 </div>
32 <div className="h-40 md:h-auto md:col-span-2 md:row-span-3 md:col-start-5 md:row-start-7 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
33 7
34 </div>
35 </div>
36 );
37}