GitHub Grid
Visit Source of Grid
Tags
Dark ModeMediumGitHubDevelopmentDarkFeatures
Source Code
1
2
3
4
5
6
GitHubGrid.jsx
1export default function GitHubGrid() {
2 return (
3 <div className="grid grid-cols-1 sm:grid-cols-6 sm:grid-rows-8 gap-4 sm:h-[600px] w-full p-4">
4 {/* Mobile: Stacked 1-column layout, auto height
5 Small/Tablet/Desktop (sm+): 6-column, 8-row grid with fixed 600px height */}
6
7 {/* Box 1: Row 1 - 1/3 Width (2 cols) */}
8 <div className="h-40 sm:h-auto sm:col-span-2 sm: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 - 2/3 Width (4 cols) */}
13 <div className="h-40 sm:h-auto sm:col-span-4 sm: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 2 - 1/3 Width (Short - 2 rows) */}
18 <div className="h-40 sm:h-auto sm:col-span-2 sm:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
19 3
20 </div>
21
22 {/* Box 4: Row 2 - 2/3 Width (Short - 2 rows) */}
23 <div className="h-40 sm:h-auto sm:col-span-4 sm:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
24 4
25 </div>
26
27 {/* Box 5: Row 3 - 2/3 Width (Reversed) */}
28 <div className="h-40 sm:h-auto sm:col-span-4 sm: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 - 1/3 Width (Reversed) */}
33 <div className="h-40 sm:h-auto sm:col-span-2 sm:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
34 6
35 </div>
36 </div>
37 );
38}