Foundations
Grid

Grid

Responsive grid patterns for page and component layout.

ResponsiveGrid

import { ResponsiveGrid, ResponsiveGridItem } from '@gtcx/ui';
 
<ResponsiveGrid columns={{ xs: 1, sm: 2, lg: 3, xl: 4 }} gap={16}>
  <ResponsiveGridItem><KpiCard title="Revenue" value="$124K" /></ResponsiveGridItem>
  <ResponsiveGridItem><KpiCard title="Users" value="2,450" /></ResponsiveGridItem>
  <ResponsiveGridItem><KpiCard title="Orders" value="340" /></ResponsiveGridItem>
  <ResponsiveGridItem><KpiCard title="Growth" value="+12%" /></ResponsiveGridItem>
</ResponsiveGrid>

Breakpoints

BreakpointWidthTypical Use
xs< 640pxMobile — single column
sm640pxMobile landscape — 2 columns
md768pxTablet — 2-3 columns
lg1024pxDesktop — 3-4 columns
xl1280pxWide desktop — 4+ columns
xxl1536pxUltra-wide — 4-6 columns

Common Patterns

Dashboard KPI Grid

<ResponsiveGrid columns={{ xs: 1, sm: 2, xl: 4 }} gap={16}>
  {kpis.map(kpi => <KpiCard key={kpi.key} {...kpi} />)}
</ResponsiveGrid>

Card Grid

<ResponsiveGrid columns={{ xs: 1, md: 2, lg: 3 }} gap={24}>
  {items.map(item => <Card key={item.id}>{item.content}</Card>)}
</ResponsiveGrid>

Split Layout

<ResponsiveGrid columns={{ xs: 1, lg: '2fr 1fr' }} gap={24}>
  <div>Main content</div>
  <div>Sidebar content</div>
</ResponsiveGrid>

useBreakpoint Hook

import { useBreakpoint } from '@gtcx/ui';
 
function MyComponent() {
  const bp = useBreakpoint();
  return bp === 'xs' ? <MobileView /> : <DesktopView />;
}
SpacingIcons