Notion Grid - AI Teammates
Visit Source of Grid
Tags
Light ModeSimpleNotionLightAITeammatesBlueMinimalist
Source Code
1
2
3
4
5
6
NotionGridAiTeammates.jsx
1export default function NotionGridAiTeammates() {
2 return (
3 <div className="grid grid-cols-1 lg:grid-cols-5 lg:grid-rows-7 gap-4 w-full p-4 lg:h-[600px]">
4 {/* Mobile/Tablet: Stacked 1-column layout
5 Desktop (lg): 5-column, 7-row hero and pillar grid */}
6
7 {/* Top Feature */}
8 <div className="col-span-1 lg:col-span-5 lg:row-span-5 h-75 md:h-[430px] lg:h-auto bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center font-medium text-gray-500">
9 1
10 </div>
11
12 {/* Bottom Pillars */}
13 <div className="h-24 md:h-30 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">2</div>
14 <div className="h-24 md:h-30 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">3</div>
15 <div className="h-24 md:h-30 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">4</div>
16 <div className="h-24 md:h-30 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">5</div>
17 <div className="h-30 md:h-30 lg:h-auto lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">6</div>
18
19 </div>
20 );
21}