Features Grid Section of Givingli
Visit Source of Grid
Tags
Light ModeSimpleGivingliFeaturesColorful
Source Code
1
2
3
4
5
6
7
8
9
GivingliFeatures.jsx
1export default function GivingliFeatures() {
2 return (
3 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 lg:grid-rows-6 gap-4 w-full p-4 lg:h-[600px]">
4 {/* Mobile: 1 col
5 Tablet (md): 2 cols
6 Desktop (lg): 3 cols, 6 rows, fixed 600px height
7 */}
8
9 {/* Box 1 */}
10 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
11 1
12 </div>
13
14 {/* Box 2 */}
15 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
16 2
17 </div>
18
19 {/* Box 3 */}
20 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
21 3
22 </div>
23
24 {/* Box 4 */}
25 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
26 4
27 </div>
28
29 {/* Box 5 */}
30 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
31 5
32 </div>
33
34 {/* Box 6 */}
35 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
36 6
37 </div>
38
39 {/* Box 7 */}
40 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
41 7
42 </div>
43
44 {/* Box 8 */}
45 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
46 8
47 </div>
48
49 {/* Box 9 */}
50 <div className="h-40 md:h-64 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
51 9
52 </div>
53 </div>
54 );
55}