Skip to content
Nim UI

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

Default Grid

View 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.

Column Variants

View 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:

colsMobilesm (640px)md (768px)lg (1024px)
11111
21222
31223
41224
51225
61236
1212412

Gap

The gap prop controls spacing between grid items.

Gap Variants

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