← Back
GitHub Grid

Details

By:

Nicolas Solerieu

Source:

https://dribbble.com/SLRNCL

Tags

Dark ModeMediumGitHubDevelopmentDarkFeatures

Source Code

1
2
3
4
5
6
GitHubGrid.jsx
1function GitHubGrid(){ 2 return ( 3 <div className="grid grid-cols-6 grid-rows-8 gap-4"> 4 {/* Row 1: 1/3 and 2/3 split */} 5 <div className="col-span-2 row-span-3">1</div> 6 <div className="col-span-4 row-span-3">2</div> 7 8 {/* Row 2: 1/3 and 2/3 split (Shorter) */} 9 <div className="col-span-2 row-span-2">3</div> 10 <div className="col-span-4 row-span-2">4</div> 11 12 {/* Row 3: 2/3 and 1/3 split (Reversed) */} 13 <div className="col-span-4 row-span-3">5</div> 14 <div className="col-span-2 row-span-3">6</div> 15 </div> 16 ); 17};