Notion Grid - Communities
Visit Source of Grid
Tags
Light ModeComplexNotionLightIllustrationCommunityMinimalist
Source Code
1
2
3
4
5
6
7
8
9
NotionGridCommunities.jsx
1export default function NotionGridCommunities() {
2 return (
3 <div className="grid grid-cols-1 sm:grid-cols-6 sm:grid-rows-10 gap-4 sm:h-[750px] w-full p-4">
4 {/* Mobile: Stacked 1-column layout
5 Tablet (sm) & Desktop (lg): 6-column, 10-row complex bento grid with sidebar */}
6
7 {/* Row 1: Header Stats - Aligned in a single row on Tablet+ */}
8 <div className="h-20 sm:h-auto sm:col-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
9 1
10 </div>
11 <div className="h-20 sm:h-auto sm:col-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
12 2
13 </div>
14 <div className="h-20 sm:h-auto sm:col-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
15 3
16 </div>
17
18 {/* Row 2: Secondary Features - Split 50/50 on Tablet+ */}
19 <div className="h-48 sm:h-auto sm:col-span-3 sm:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
20 4
21 </div>
22 <div className="h-48 sm:h-auto sm:col-span-3 sm:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
23 5
24 </div>
25
26 {/* Row 3+: Main Hero (Spans 4 columns) */}
27 <div className="h-64 sm:h-auto sm:col-span-4 sm:row-span-6 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
28 6
29 </div>
30
31 {/* Sidebar Stack: Anchored to Column 5 to sit next to the Hero */}
32 <div className="h-32 sm:h-auto sm:col-span-2 sm:row-span-2 sm:col-start-5 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
33 7
34 </div>
35 <div className="h-32 sm:h-auto sm:col-span-2 sm:row-span-2 sm:col-start-5 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
36 8
37 </div>
38 <div className="h-32 sm:h-auto sm:col-span-2 sm:row-span-2 sm:col-start-5 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
39 9
40 </div>
41 </div>
42 );
43}