Layout

Grid

Equal columns (1–6 or 12) with gaps from the spacing scale, per breakpoint.

Revenue
Users
Churn
NPS

Usage

Use it to:

  • cards, stats and galleries that reflow by screen width

Don’t use it to:

  • a single row or column of items (use Stack)
  • tabular data (use Table)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/GridExample.tsx
import { Grid } from '@krackedui/motion';

export function StatGrid() {
  return (
    <Grid columns={{ base: 1, sm: 2, lg: 4 }} gap={3}>
      <div>Revenue</div>
      <div>Users</div>
      <div>Churn</div>
      <div>NPS</div>
    </Grid>
  );
}

Examples

Fixed columns

A
B
C
D
E
F

Responsive gap

One
Two

As a list

  • Website
  • Mobile app
  • API

API Reference

Grid

A CSS grid <div>; supports all of its props. Cells may shrink below their content width (min-width: 0). Adds:

PropTypeDefault
columns
12345612{ base, sm, md, lg, xl }
1
gap
01234568101216{ base, sm, md, lg, xl }
asChild
boolean
false

Accessibility

  • Layout only: no role. Use asChild with <ul> for lists of cards so they are announced as a list.
  • Cells keep DOM order at every breakpoint.
© 2026 Motion. Internal documentation.