Grid
A powerful layout component using CSS Grid for creating complex, responsive layouts with precise control.
Basic Grid
A simple 2-column grid layout with equal spacing between items.
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
export function BasicGrid() {return (<div className="grid grid-cols-2 gap-4 p-4 bg-neutral-800 border border-white/10 rounded-lg"><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Grid Item 1</div><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Grid Item 2</div><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Grid Item 3</div><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Grid Item 4</div></div>)}
Three Columns
A 3-column grid perfect for product listings, feature cards, or dashboard widgets.
Item 1
Item 2
Item 3
export function ThreeColumnGrid() {return (<div className="grid grid-cols-3 gap-4 p-4 bg-neutral-800 border border-white/10 rounded-lg"><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Item 1</div><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Item 2</div><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Item 3</div></div>)}
Responsive Grid
A responsive grid that adapts to its container size. Drag the resize handle to see the grid respond.
Live preview: Drag the resize handle on the right edge to see real-time responsive behavior.
Current layout: 4 columns
Item 1
Item 2
Item 3
Item 4
export function ResponsiveGrid() {return (<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-4 bg-neutral-800 border border-white/10 rounded-lg"><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Item 1</div><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Item 2</div><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Item 3</div><div className="bg-neutral-700 p-3 rounded-md text-white text-sm text-center">Item 4</div></div>)}
