Upzelo Branding
Visit Source of Grid
Tags
Light ModeComplexUpzeloBrandingGraphic DesignGreen
Source Code
1
2
3
4
5
6
UpzeloBrandingGrid.jsx
1export default function UpzeloBrandingGrid() {
2 return (
3 <div className="grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-7 gap-4 w-full p-4 lg:h-[600px]">
4 {/* Mobile/Tablet: Stacked 1-column layout
5 Desktop (lg): 3-column, 7-row complex bento grid */}
6
7 {/* Box 1 */}
8 <div className="h-40 md:h-64 lg:h-auto lg:col-span-2 lg:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
9 1
10 </div>
11
12 {/* Box 2 */}
13 <div className="h-40 md:h-64 lg:h-auto lg:col-span-2 lg:row-span-2 lg:col-start-1 lg:row-start-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
14 2
15 </div>
16
17 {/* Box 3 */}
18 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 lg:col-start-1 lg:row-start-6 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
19 3
20 </div>
21
22 {/* Box 4 */}
23 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 lg:col-start-2 lg:row-start-6 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
24 4
25 </div>
26
27 {/* Box 5 */}
28 <div className="h-40 md:h-64 lg:h-auto lg:row-span-4 lg:col-start-3 lg:row-start-1 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
29 5
30 </div>
31
32 {/* Box 6 */}
33 <div className="h-40 md:h-64 lg:h-auto lg:row-span-3 lg:col-start-3 lg:row-start-5 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
34 6
35 </div>
36 </div>
37 );
38};