Diagram Grid
Visit Source of Grid
Tags
Dark ModeMediumDiagramDesignAIFeatures
Source Code
1
2
3
4
5
6
7
8
DiagramGrid.jsx
1export default function DiagramGrid() {
2 return (
3 <div className="grid grid-cols-1 md:grid-cols-4 md:grid-rows-9 gap-4 w-full p-4 h-auto md:h-[500px] lg:h-[600px]">
4 {/* Mobile: Stacked 1-column layout, auto height
5 Tablet (md) & Desktop (lg): Same 4-column, 9-row grid layout */}
6
7 {/* Box 1: Row 1 - Left Column */}
8 <div className="h-40 md:h-auto md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
9 1
10 </div>
11
12 {/* Box 2: Row 1 - Center (Wide) */}
13 <div className="h-40 md:h-auto md:col-span-2 md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
14 2
15 </div>
16
17 {/* Box 3: Row 1 - Right Column */}
18 <div className="h-40 md:h-auto md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
19 3
20 </div>
21
22 {/* Box 4: Row 2 - Left Half */}
23 <div className="h-40 md:h-auto md:col-span-2 md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
24 4
25 </div>
26
27 {/* Box 5: Row 2 - Right Half */}
28 <div className="h-40 md:h-auto md:col-span-2 md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
29 5
30 </div>
31
32 {/* Box 6: Row 3 - Left Column */}
33 <div className="h-40 md:h-auto md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
34 6
35 </div>
36
37 {/* Box 7: Row 3 - Center (Wide) */}
38 <div className="h-40 md:h-auto md:col-span-2 md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
39 7
40 </div>
41
42 {/* Box 8: Row 3 - Right Column */}
43 <div className="h-40 md:h-auto md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
44 8
45 </div>
46 </div>
47 );
48}