Grid

Create powerful and responsive multi-column layouts.

Overview

The Grid component is a wrapper around CSS Grid, providing a simple and declarative way to create complex layouts. It allows you to specify the number of columns for different screen sizes, as well as the gap between them.

Usage

import { Grid } from '@/components/layout/grid';
import { Card } from '@/components/ui/card';

export function MyLayout() {
  return (
    <Grid cols={1} md={2} lg={3} gap={6}>
      <Card>Item 1</Card>
      <Card>Item 2</Card>
      <Card>Item 3</Card>
      <Card>Item 4</Card>
      <Card>Item 5</Card>
      <Card>Item 6</Card>
    </Grid>
  );
}

Props

Prop	Type	Description
cols	number	The number of columns on mobile screens.
sm	number	The number of columns on small screens.
md	number	The number of columns on medium screens.
lg	number	The number of columns on large screens.
xl	number	The number of columns on extra-large screens.
gap	number	The spacing between grid items (Tailwind spacing scale).

Best Practices

• ✅ Do this: Use the Grid component for arranging cards, widgets, and other repeating elements.
• ✅ Do this: Use the responsive props (sm, md, lg, xl) to ensure your layout looks great on all devices.
• ❌ Don't do this: Use Grid for simple one-dimensional layouts; use Stack or Flex instead.