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>
  )
}

Flex

Aspect Ratio