Credit Card Grid
Visit Source of Grid
Details
By:
Arunava Das
Source:
https://dribbble.com/shots/25693728-Bento-Grid-Layout-Features-Benefits-SectionTags
Light ModeMediumFintechCardsLightFeatures
Source Code
1
2
3
4
5
6
CreditCardGrid.jsx
1export default function CreditCardGrid() {
2 return (
3 <div className="grid grid-cols-1 md:grid-cols-10 md:grid-rows-8 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): 10-column, 8-row grid with fixed 500px height
6 Desktop (lg): 10-column, 8-row grid with fixed 600px height */}
7
8 {/* Box 1: Left Hero Block */}
9 <div className="h-40 md:h-auto md:col-span-4 md:row-span-5 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
10 1
11 </div>
12
13 {/* Box 2: Right Top Bar */}
14 <div className="h-40 md:h-auto md:col-span-6 md:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
15 2
16 </div>
17
18 {/* Box 3: Right Mid Block 1 */}
19 <div className="h-40 md:h-auto md:col-span-3 md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
20 3
21 </div>
22
23 {/* Box 4: Right Mid Block 2 */}
24 <div className="h-40 md:h-auto md:col-span-3 md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
25 4
26 </div>
27
28 {/* Box 5: Bottom Block Left (Wide) */}
29 <div className="h-40 md:h-auto md:col-span-6 md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
30 5
31 </div>
32
33 {/* Box 6: Bottom Block Right */}
34 <div className="h-40 md:h-auto md:col-span-4 md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
35 6
36 </div>
37
38 </div>
39 );
40}