Boundless Grid
Visit Source of Grid
Tags
Dark ModeComplexBoundlessOrangeDarkPortfolio
Source Code
1
2
3
4
5
6
7
8
9
BoundlessGrid.jsx
1export default function BoundlessGrid() {
2 return (
3 <div className="grid gap-4 p-4 w-full h-auto grid-cols-2 grid-rows-18 md:grid-cols-4 md:grid-rows-9 md:h-[900px] lg:grid-cols-6 lg:grid-rows-6 lg:h-[600px]">
4 {/* Default/Mobile: 2-column, 18-row vertical stack
5 Tablet (md): 4-column, 9-row balanced grid
6 Desktop (lg): 6-column, 6-row interlocking grid */}
7
8 {/* Box 1: Top Feature */}
9 <div className="h-auto col-span-2 row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
10 1
11 </div>
12
13 {/* Box 2: Middle Stack (Mobile) | Top Right (Tablet) | Center Top (Desktop) */}
14 <div className="h-auto col-span-2 row-span-3 row-start-4 md:row-start-1 md:col-start-3 lg:col-start-3 lg:row-start-1 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
15 2
16 </div>
17
18 {/* Box 3: Upper Stack (Mobile) | Mid Left (Tablet) | Right Top (Desktop) */}
19 <div className="h-auto col-span-2 row-span-3 row-start-7 md:row-start-4 md:col-start-1 lg:col-start-5 lg:row-start-1 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
20 3
21 </div>
22
23 {/* Box 4: Feature Pair Left (Tall) | Mid Right (Tablet) | Bottom Far-Left (Desktop) */}
24 <div className="h-auto row-span-2 row-start-10 md:row-start-4 md:col-start-3 lg:col-start-1 lg:row-start-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
25 4
26 </div>
27
28 {/* Box 5: Feature Pair Left (Small) | Bottom Right (Tablet) | Bottom Far-Left Base (Desktop) */}
29 <div className="h-auto row-start-12 md:row-start-6 md:col-start-3 lg:col-start-1 lg:row-start-6 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
30 5
31 </div>
32
33 {/* Box 6: Feature Pair Right (Tall) | Mid Right Outer (Tablet) | Bottom Mid-Left (Desktop) */}
34 <div className="h-auto row-span-2 row-start-10 col-start-2 md:row-start-4 md:col-start-4 lg:col-start-2 lg:row-start-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
35 6
36 </div>
37
38 {/* Box 7: Feature Pair Right (Small) | Bottom Right Outer (Tablet) | Bottom Mid-Left Base (Desktop) */}
39 <div className="h-auto row-start-12 col-start-2 md:row-start-6 md:col-start-4 lg:col-start-2 lg:row-start-6 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
40 7
41 </div>
42
43 {/* Box 8: Lower Stack (Mobile) | Bottom Left (Tablet) | Bottom Center (Desktop) */}
44 <div className="h-auto col-span-2 row-span-3 row-start-13 md:row-start-7 md:col-start-1 lg:col-start-3 lg:row-start-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
45 8
46 </div>
47
48 {/* Box 9: Bottom Stack (Mobile) | Bottom Right (Tablet) | Bottom Right (Desktop) */}
49 <div className="h-auto col-span-2 row-span-3 row-start-16 md:row-start-7 md:col-start-3 lg:col-start-5 lg:row-start-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
50 9
51 </div>
52 </div>
53 );
54}