Notion Grid - Security
Visit Source of Grid
Tags
Light ModeSimpleNotionLightSecurityMinimalist
Source Code
1
2
3
4
5
6
7
8
9
NotionGridSecurity.jsx
1export default function NotionGridSecurity() {
2 return (
3 <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-9 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): 3-column grid with explicit row-spans to maintain hierarchy
6 Desktop (lg): 9-column, 9-row deep feature grid */}
7
8 {/* Top Tier: Deep Feature Cards (Tallest) */}
9 <div className="h-64 md:h-auto md:row-span-4 lg:col-span-3 lg:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
10 1
11 </div>
12 <div className="h-64 md:h-auto md:row-span-4 lg:col-span-3 lg:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
13 2
14 </div>
15 <div className="h-64 md:h-auto md:row-span-4 lg:col-span-3 lg:row-span-4 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
16 3
17 </div>
18
19 {/* Middle Tier: Slim Support Cards (Shortest) */}
20 <div className="h-32 md:h-auto md:row-span-2 lg:col-span-3 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
21 4
22 </div>
23 <div className="h-32 md:h-auto md:row-span-2 lg:col-span-3 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
24 5
25 </div>
26 <div className="h-32 md:h-auto md:row-span-2 lg:col-span-3 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
27 6
28 </div>
29
30 {/* Bottom Tier: Standard Cards (Medium) */}
31 <div className="h-48 md:h-auto md:row-span-3 lg:col-span-3 lg:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
32 7
33 </div>
34 <div className="h-48 md:h-auto md:row-span-3 lg:col-span-3 lg:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
35 8
36 </div>
37 <div className="h-48 md:h-auto md:row-span-3 lg:col-span-3 lg:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
38 9
39 </div>
40 </div>
41 );
42}