Grid

The Grid component provides a responsive CSS Grid layout system. Columns automatically collapse on smaller screens, making it easy to build layouts that adapt from mobile to desktop without writing custom media queries.

Import

import { Grid } from '@nim-ui/components';

Basic Usage

Code

<Grid cols={3} gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

Columns

The cols prop sets the number of columns. All column values include responsive breakpoints that collapse to fewer columns on smaller screens.

1 col

Code

<Grid cols={1}>Single column</Grid>
<Grid cols={2}>Two columns (1 on mobile)</Grid>
<Grid cols={3}>Three columns (2 on sm, 1 on mobile)</Grid>
<Grid cols={4}>Four columns (2 on sm, 1 on mobile)</Grid>

Responsive Breakpoints

Each column count includes automatic responsive behavior:

cols	Mobile	sm (640px)	md (768px)	lg (1024px)
1	1	1	1	1
2	1	2	2	2
3	1	2	2	3
4	1	2	2	4
5	1	2	2	5
6	1	2	3	6
12	1	2	4	12

Gap

The gap prop controls spacing between grid items.

none

Code

<Grid cols={3} gap="none">No gap</Grid>
<Grid cols={3} gap="sm">Small gap (0.5rem)</Grid>
<Grid cols={3} gap="md">Medium gap (1rem) - default</Grid>
<Grid cols={3} gap="lg">Large gap (1.5rem)</Grid>
<Grid cols={3} gap="xl">Extra large gap (2rem)</Grid>

Props

Name	Type	Default	Description
`cols`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 12`	`1`	Number of grid columns with built-in responsive breakpoints
`gap`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Gap between grid items
`className`	`string`	-	Additional CSS classes to apply
`children*`	`ReactNode`	-	Grid items to render

Usage Examples

Feature Cards

function FeaturesSection() {
  return (
    <Grid cols={3} gap="lg">
      <Card>
        <CardHeader>Fast</CardHeader>
        <CardContent>Optimized for performance</CardContent>
      </Card>
      <Card>
        <CardHeader>Secure</CardHeader>
        <CardContent>Enterprise-grade security</CardContent>
      </Card>
      <Card>
        <CardHeader>Scalable</CardHeader>
        <CardContent>Grows with your needs</CardContent>
      </Card>
    </Grid>
  );
}

Dashboard Layout

function Dashboard() {
  return (
    <Container>
      {/* Stats row */}
      <Grid cols={4} gap="md">
        <StatCard label="Users" value="1,234" />
        <StatCard label="Revenue" value="$5,678" />
        <StatCard label="Orders" value="890" />
        <StatCard label="Growth" value="+12%" />
      </Grid>

      {/* Content area */}
      <Grid cols={2} gap="lg">
        <Card>Chart goes here</Card>
        <Card>Recent activity</Card>
      </Grid>
    </Container>
  );
}

Photo Gallery

function Gallery({ photos }) {
  return (
    <Grid cols={4} gap="sm">
      {photos.map((photo) => (
        <img
          key={photo.id}
          src={photo.url}
          alt={photo.alt}
          className="rounded-lg object-cover aspect-square"
        />
      ))}
    </Grid>
  );
}

Accessibility

The Grid component renders a <div> with CSS Grid layout. For accessible grid patterns:

Use semantic elements within grid items for proper content structure
Grid ordering should match the visual order to avoid confusion for screen reader users
Consider adding role="list" and role="listitem" when the grid represents a collection of similar items

<Grid cols={3} role="list">
  <div role="listitem">Item 1</div>
  <div role="listitem">Item 2</div>
  <div role="listitem">Item 3</div>
</Grid>

Container - Responsive max-width wrapper
Stack - Vertical or horizontal stacking
Flex - Flexbox layout utility
Card - Content container, commonly used as grid items

On this page