Notion Grid - Question and Updating
Visit Source of Grid
Tags
Light ModeSimpleNotionLightQuestionUpdatingUpdatesMinimalist
Source Code
1
2
3
NotionGridQuestionAndUpdate.jsx
1export default function NotionGridQuestionAndUpdate() {
2 return (
3 <div className="grid grid-cols-1 md:grid-cols-5 lg:grid-cols-5 lg:grid-rows-9 gap-4 w-full p-4 h-auto md:h-[500px] lg:h-[600px]">
4 {/* Mobile: Stacked 1-column layout
5 Tablet (md) & Desktop (lg): Asymmetrical 1-over-2 bento grid */}
6
7 {/* Main Hero Card - Full width on all breakpoints */}
8 <div className="h-80 md:h-auto md:col-span-5 md:row-span-5 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
9 1
10 </div>
11
12 {/* Support Card Left - 40% width on Tablet+ */}
13 <div className="h-48 md:h-auto md:col-span-2 md:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
14 2
15 </div>
16
17 {/* Support Card Right - 60% width on Tablet+ */}
18 <div className="h-48 md:h-auto md:col-span-3 md:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
19 3
20 </div>
21 </div>
22 );
23}