Notion Grid - Assistants
Visit Source of Grid
Tags
Light ModeSimpleNotionLightAIAssistantsBlueRedYellowMinimalist
Source Code
1
2
3
NotionGridAssistants.jsx
1export default function NotionGridAssistants() {
2 return (
3 <div className="grid grid-cols-1 lg:grid-cols-6 lg:grid-rows-7 gap-4 w-full p-4 h-auto lg:h-[600px]">
4 {/* Mobile/Tablet: Stacked 1-column layout with equal-sized square boxes
5 Desktop (lg): 6-column, 7-row layout with a banner top and split bottom */}
6
7 {/* Box 1: Full-width square on mobile/tablet, Banner on desktop */}
8 <div className="aspect-square lg:aspect-auto lg:col-span-6 lg:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
9 1
10 </div>
11
12 {/* Box 2: Full-width square on mobile/tablet, Left split on desktop */}
13 <div className="aspect-square lg:aspect-auto lg:col-span-3 lg:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
14 2
15 </div>
16
17 {/* Box 3: Full-width square on mobile/tablet, Right split on desktop */}
18 <div className="aspect-square lg:aspect-auto lg:col-span-3 lg:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
19 3
20 </div>
21 </div>
22 );
23}