Notion Grid - Calendar
Visit Source of Grid
Tags
Light ModeSimpleNotionLightCalendarBlueMinimalist
Source Code
1
2
3
4
NotionGridCalendar.jsx
1export default function NotionGridCalendar() {
2 return (
3 <div className="grid grid-cols-1 sm:grid-cols-3 sm:grid-rows-7 gap-4 w-full p-4 h-auto sm:h-[500px] lg:h-[600px]">
4 {/* Mobile: Stacked 1-column layout
5 Tablet (sm) & Desktop (lg): 3-column, 7-row calendar bento grid */}
6
7 {/* Top Section: Hero/Calendar View - Full width on Tablet+ */}
8 <div className="h-80 sm:h-auto sm:col-span-3 sm:row-span-5 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
9 1
10 </div>
11
12 {/* Bottom Section: Three Supporting Columns - Side-by-side on Tablet+ */}
13 <div className="h-32 sm:h-auto sm:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
14 2
15 </div>
16
17 <div className="h-32 sm:h-auto sm:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
18 3
19 </div>
20
21 <div className="h-32 sm:h-auto sm:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
22 4
23 </div>
24 </div>
25 );
26}