Linktree Grid - 2026
Visit Source of Grid
Tags
Light ModeSimpleLinktreeFeaturesColorful
Source Code
1
2
3
LinktreeGrid2026.jsx
1export default function LinktreeGrid2026() {
2 return (
3 <div className="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-6 gap-4 w-full p-4 lg:h-[600px]">
4 {/* Mobile: Stacked 1-column layout
5 Tablet (md): Stacked 1-column with dominant hero height
6 Desktop (lg): 2-column, 6-row simple grid */}
7
8 {/* Box 1 */}
9 <div className="h-40 md:h-64 lg:h-auto lg:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
10 1
11 </div>
12
13 {/* Box 2: The "Bigger" Box
14 Maintains dominance with h-80 (mobile) and h-[500px] (tablet)
15 */}
16 <div className="h-80 md:h-125 lg:h-auto lg:row-span-6 lg:row-start-1 lg:col-start-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
17 2
18 </div>
19
20 {/* Box 3 */}
21 <div className="h-40 md:h-64 lg:h-auto lg:row-span-3 lg:row-start-4 lg:col-start-1 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">
22 3
23 </div>
24 </div>
25 );
26};