Notion Grid - Testimonials
Visit Source of Grid
Tags
Light ModeSimpleNotionLightTestimonialsMinimalist
Source Code
1
2
3
4
NotionGridTestimonials.jsx
1export default function NotionGridTestimonials() {
2 return (
3 <div className="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-6 lg:grid-rows-7 gap-4 w-full p-4 h-auto md:h-[450px] lg:h-[600px]">
4 {/* Mobile: Stacked 1-column layout
5 Tablet (md): 2-column split with compact height
6 Desktop (lg): 2-column split with expanded height */}
7
8 {/* Main Left Feature - Spans full height on Tablet+ */}
9 <div className="h-96 md:h-auto md:col-span-3 lg:col-span-3 md:row-span-7 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
10 1
11 </div>
12
13 {/* Right Side Stack - Testimonials/Supporting content */}
14 <div className="h-40 md:h-auto md:col-span-3 lg:col-span-3 md:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
15 2
16 </div>
17
18 <div className="h-40 md:h-auto md:col-span-3 lg:col-span-3 md:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
19 3
20 </div>
21
22 <div className="h-48 md:h-auto md:col-span-3 lg:col-span-3 md:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
23 4
24 </div>
25 </div>
26 );
27}