Notion Grid - Experience
Visit Source of Grid
Tags
Light ModeSimpleNotionLightExperienceMinimalist
Source Code
1
2
3
4
5
NotionGridExperience.jsx
1export default function NotionGridExperience() {
2 return (
3 <div className="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-6 lg:grid-rows-8 gap-4 w-full p-4 h-auto lg:h-[600px]">
4 {/* Mobile: Stacked 1-column layout
5 Tablet (md) & Desktop (lg): 2-row layout (2 top features, 3 bottom features) */}
6
7 {/* Top Section: Primary Feature Boxes */}
8 <div className="h-80 md:h-96 lg:h-auto md:col-span-3 lg:col-span-3 lg:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
9 1
10 </div>
11 <div className="h-80 md:h-96 lg:h-auto md:col-span-3 lg:col-span-3 lg:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
12 2
13 </div>
14
15 {/* Bottom Section: Supporting Feature Boxes */}
16 <div className="h-48 md:h-72 lg:h-auto md:col-span-2 lg:col-span-2 lg:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
17 3
18 </div>
19 <div className="h-48 md:h-72 lg:h-auto md:col-span-2 lg:col-span-2 lg:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
20 4
21 </div>
22 <div className="h-48 md:h-72 lg:h-auto md:col-span-2 lg:col-span-2 lg:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
23 5
24 </div>
25
26 </div>
27 );
28}