Notion Grid - Teams
Visit Source of Grid
Tags
Light ModeSimpleNotionLightIllustrationTeamsMinimalist
Source Code
1
2
3
4
5
NotionGridTeams.jsx
1export default function NotionGridTeams() {
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 with visual hierarchy
5 Tablet (md) & Desktop (lg): 2-row layout (2 top, 3 bottom) */}
6
7 {/* Primary Features: Larger height on mobile to fit complex content */}
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 {/* Supporting Features: Smaller height on mobile for quick scannability */}
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}