Skip to main content
Version: 1.0.3

ResponsiveGridLayout

Overview​

The ResponsiveGridLayout component is a powerful template for creating responsive grid-based dashboards and content layouts. It automatically adapts from a single column on mobile devices to multi-column grids on tablets, laptops, and large monitors. The component includes support for headers, footers, customizable cards, and various styling options.

Preview​

Build once. Ship everywhere.

Responsive Grid Layout

The cards below demonstrate how Ignix UI reflows from a single column on phones to multi-column grids on tablets, laptops, and large monitors.

Getting startedUpdated 2h ago

ignix init

Bootstrap a new workspace with linting, testing, and CI wiring in under 3 minutes.

3 minavg setup
QualityLast scan 32m ago

Security Scan

Audit dependencies, secrets, and config drift before every deploy.

12 issues▲ −4 this week
Delivery

One-command deploys

Target preview, staging, or production environments directly from the CLI.

28% faster▲ vs. manual
InsightsBuild #248

Realtime metrics

Track build duration, bundle size, and regression signals in one place.

9.4s▼ +1.2s
Templates

Curated starters

Pick from dashboard, marketing, and application templates optimized for Ignix UI.

24 kits
AutomationBeta

Guided workflows

Answer a few prompts and let the CLI scaffold pipelines, docs, and governance.

Mobile

Touch-ready controls

Tap targets, haptics, and gesture helpers make commands friendly on tablets.

44%▲ mobile users
Ecosystem

Extension marketplace

Compose official and community plugins for auth, payments, data, and more.

68 Ext.▲ +8 new
Need a different breakpoint? Override the grid classes via props.© 2026 Ignix UI. Crafted for developers on the move.

Installation​

ignix add component responsive-grid-layout

Usage​

Basic Example​

import { ResponsiveGridLayout, type ResponsiveGridItem } from './components/responsive-grid-layout';

const gridItems: ResponsiveGridItem[] = [
  {
    id: "1",
    badge: "Getting started",
    title: "ignix init",
    description: "Bootstrap a new workspace with linting, testing, and CI wiring.",
    statValue: "3 min",
    statChange: "avg setup",
    statTrend: "neutral",
    actionLabel: "Run ignix init",
  },
  {
    id: "2",
    badge: "Quality",
    title: "Security Scan",
    description: "Audit dependencies, secrets, and config drift before every deploy.",
    statValue: "12 issues",
    statChange: "−4 this week",
    statTrend: "up",
    actionLabel: "View report",
  },
];

function Dashboard() {
  return (
    <ResponsiveGridLayout
      header={<div>Dashboard Header</div>}
      footer={<div>Dashboard Footer</div>}
      items={gridItems}
    />
  );
}

Custom Card Renderer​

import { ResponsiveGridLayout, type ResponsiveGridItem } from './components/responsive-grid-layout';
import { Card, CardContent, CardHeader, CardTitle } from './components/card';

function CustomDashboard() {
  const items: ResponsiveGridItem[] = [
    // ... your items
  ];

  return (
    <ResponsiveGridLayout
      items={items}
      renderItem={(item, index) => (
        <Card key={item.id ?? index} variant="premium" interactive="lift" className="h-full rounded-3xl">
          <CardHeader>
            <CardTitle className="text-2xl">{item.title}</CardTitle>
          </CardHeader>
          <CardContent>
            {item.statValue && (
              <p className="text-4xl font-bold">{item.statValue}</p>
            )}
          </CardContent>
        </Card>
      )}
    />
  );
}

Compact Mobile-First Layout​

function CompactLayout() {
  return (
    <ResponsiveGridLayout
      items={gridItems.slice(0, 4)}
      gap="sm"
      padding="sm"
      maxWidth="5xl"
      className="bg-background"
    />
  );
}

Props​

PropTypeDefaultDescription
headerReact.ReactNodeundefinedContent for the header section
footerReact.ReactNodeundefinedContent for the footer section
itemsResponsiveGridItem[][]Array of grid items to display
renderItem(item: ResponsiveGridItem, index: number) => React.ReactNodeundefinedCustom render function for items
padding"sm" | "md" | "lg""md"Padding size for the container
gap"sm" | "md" | "lg""md"Gap between grid items
maxWidth"3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | "prose""7xl"Maximum width of the container
minCardHeightnumber220Minimum height for grid cards in pixels
stickyHeaderbooleanfalseWhether header should be sticky
stickyFooterbooleanfalseWhether footer should be sticky
enableHoverbooleantrueWhether to enable hover effects on cards
classNamestringundefinedAdditional CSS classes for the root container
contentClassNamestringundefinedAdditional CSS classes for the content wrapper
gridClassNamestringundefinedAdditional CSS classes for the grid
cardClassNamestringundefinedAdditional CSS classes for default cards

ResponsiveGridItem Interface​

PropertyTypeDescription
idstring | numberUnique identifier for the item
titlestringTitle of the grid item (required)
descriptionstringDescription text for the item
badgeReact.ReactNodeBadge or label to display
metastringMetadata text (e.g., "Updated 2h ago")
statValuestringStatistic value to display
statChangestringChange indicator text
statTrend"up" | "down" | "neutral"Trend direction for styling
mediaReact.ReactNodeMedia content (images, icons, etc.)
footerReact.ReactNodeCustom footer content
actionLabelstringLabel for the action button
actionHrefstringURL for the action link (creates an anchor tag)

Responsive Breakpoints​

The grid automatically adapts at the following breakpoints:

  • Mobile (< 640px): 1 column
  • Tablet (≥ 640px): 2 columns
  • Desktop (≥ 1024px): 3 columns
  • Large Desktop (≥ 1280px): 4 columns

You can override these breakpoints by providing custom gridClassName with your own Tailwind grid classes.

Advanced Configuration​

<ResponsiveGridLayout
  header={<HeaderContent />}
  footer={<FooterContent />}
  stickyHeader={true}
  stickyFooter={true}
  items={gridItems}
/>

Custom Grid Classes​

<ResponsiveGridLayout
  items={gridItems}
  gridClassName="grid-cols-1 md:grid-cols-3 2xl:grid-cols-5"
/>

Disable Hover Effects​

<ResponsiveGridLayout
  items={gridItems}
  enableHover={false}
/>