← Back

Linearity Grid

Visit Source of Grid
Linearity Grid

Details

By:

Linearity

Source:

https://www.awwwards.com/inspiration/bento-linearity

Tags

Light ModeComplexLightLinearityColorfulDesignIllustration

Source Code

1
2
3
4
5
6
7
8
9
10
LinearityGrid.jsx
1export default function LinearityGrid() { 2 return ( 3 <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 lg:grid-rows-7 gap-4 w-full p-4 h-auto lg:h-[600px]"> 4 {/* Mobile: 2-column layout with paired bottom blocks 5 Tablet (md): 4-column asymmetrical layout (3/4 Symmetrical, 5/6 Asymmetrical) 6 Desktop (lg): 8-column, 7-row complex bento grid */} 7 8 {/* Box 1 & 2: Top Pair (Balanced) */} 9 <div className="h-40 col-span-2 md:col-span-2 lg:h-auto lg:col-span-3 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">1</div> 10 <div className="h-40 col-span-2 md:col-span-2 lg:h-auto lg:col-span-3 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">2</div> 11 12 {/* Box 3 & 4: Symmetrical Pair on Tablet (2+2 split) */} 13 <div className="h-40 col-span-2 md:col-span-2 lg:h-auto lg:col-span-2 lg:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">3</div> 14 <div className="h-40 col-span-2 md:col-span-2 lg:h-auto lg:col-span-2 lg:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">4</div> 15 16 {/* Box 5 & 6: Asymmetrical Pair on Tablet (3+1 split) */} 17 <div className="h-40 col-span-2 md:col-span-3 lg:h-auto lg:col-span-4 lg:row-span-3 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">5</div> 18 <div className="h-40 col-span-2 md:col-span-1 lg:h-auto lg:col-span-2 lg:row-span-2 lg:col-start-7 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">6</div> 19 20 {/* Box 7, 8, 9, 10: Bottom Quad (1 column each on Tablet) */} 21 <div className="h-32 col-span-1 md:col-span-1 lg:h-auto lg:col-span-2 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">7</div> 22 <div className="h-32 col-span-1 md:col-span-1 lg:h-auto lg:col-span-2 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">8</div> 23 <div className="h-32 col-span-1 md:col-span-1 lg:h-auto lg:col-span-2 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">9</div> 24 <div className="h-32 col-span-1 md:col-span-1 lg:h-auto lg:col-span-2 lg:row-span-2 bg-[#F1F5F9] rounded-md border border-gray-200 flex items-center justify-center">10</div> 25 26 </div> 27 ); 28};