Zento Grid
Visit Source of Grid
Tags
Dark ModeComplexZentoVioletPurpleDarkPortfolio
Source Code
1
2
3
4
5
6
7
8
9
10
11
12
ZentoGrid.jsx
1export default function ZentoGrid() {
2 return (
3 <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-8 lg:grid-rows-6 gap-4 w-full p-4 h-auto lg:h-[600px]">
4 {/* Mobile: 2-column grid (Boxes 4/5 pair up, others stack)
5 Tablet (md): 3-column grid (Boxes 4/5/6 pair up, 9/10 and 11/12 side-by-side)
6 Desktop (lg): Original 8-column, 6-row complex dashboard */}
7
8 {/* Box 1, 2, 3: Full width on Mobile/Tablet */}
9 <div className="h-40 md:h-64 col-span-2 md:col-span-3 lg:h-auto lg:col-span-2 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">1</div>
10 <div className="h-40 md:h-64 col-span-2 md:col-span-3 lg:h-auto lg:col-span-2 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">2</div>
11 <div className="h-40 md:h-64 col-span-2 md:col-span-3 lg:h-auto lg:col-span-2 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">3</div>
12
13 {/* Box 4 & 5: Pair up on Mobile (col-span-1) | 4, 5, 6: Row of 3 on Tablet */}
14 <div className="h-24 md:h-32 col-span-1 md:col-span-1 lg:h-auto lg:col-start-3 lg:row-start-1 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">4</div>
15 <div className="h-24 md:h-32 col-span-1 md:col-span-1 lg:h-auto lg:col-start-4 lg:row-start-1 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">5</div>
16
17 {/* Box 6: Stacks on Mobile | Row of 3 on Tablet */}
18 <div className="h-24 md:h-32 col-span-2 md:col-span-1 lg:h-auto lg:col-start-5 lg:row-start-1 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">6</div>
19
20 {/* Box 7 & 8: Large Feature Areas */}
21 <div className="h-64 col-span-2 md:col-span-3 lg:h-auto lg:col-span-3 lg:row-span-3 lg:col-start-3 lg:row-start-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">7</div>
22 <div className="h-48 col-span-2 md:col-span-3 lg:h-auto lg:col-span-3 lg:row-span-2 lg:col-start-3 lg:row-start-5 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">8</div>
23
24 {/* Right side pairing (9 & 10) */}
25 <div className="h-64 col-span-2 md:col-span-2 lg:h-auto lg:col-span-2 lg:row-span-3 lg:col-start-6 lg:row-start-1 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">9</div>
26 <div className="h-64 col-span-2 md:col-span-1 lg:h-auto lg:col-span-1 lg:row-span-3 lg:col-start-8 lg:row-start-1 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">10</div>
27
28 {/* Right side pairing (11 & 12) */}
29 <div className="h-64 col-span-2 md:col-span-1 lg:h-auto lg:col-span-1 lg:row-span-3 lg:col-start-6 lg:row-start-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">11</div>
30 <div className="h-64 col-span-2 md:col-span-2 lg:h-auto lg:col-span-2 lg:row-span-3 lg:col-start-7 lg:row-start-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">12</div>
31 </div>
32 );
33};