Everyday

Playground

Grid

layout

Responsive grid with predefined column patterns

Consistent grid layouts without arbitrary configurations

import { Grid } from "@everydayos/ui";

Usage

Grid of feature cards

Designed spacing

Use token-backed gaps and section spacing to avoid ad-hoc layouts.

Composable primitives

Prefer Stack + Grid + Surface over one-off wrapper components.

Consistent tone

Use Surface tone + radius + border to keep UI cohesive.

API

cols
Default: 3
123456auto2-asymmetric2-asymmetric-reverse
defaultpreferredrare
gap
Default: md
xssmmdlgxl
PropTypeDefault
classNamestring—
children*React.ReactNode—

Examples

Steps Grid

Numbered steps in a grid layout

01

Compose

Start from primitives and patterns.

02

Constrain

Prefer token-backed props.

03

Validate

Inspect examples in the registry.

Composition

Pairs well with

Surface
Card
MediaFrame
Heading

When to avoid

  • Need wrapping inline items — use Inline instead
  • Need vertical stacking — use Stack instead

Patterns

Feature Grid

Grid
Surface
Stack
Heading
Text

Grid of feature cards with icons, titles, and descriptions

<Grid cols="3" gap="lg">
  {features.map((f) => (
    <Surface key={f.title} tone="muted" radius="xl" border className="p-6">
      <Stack spacing="sm">
        <Heading as="h3" size="m">{f.title}</Heading>
        <Text variant="muted">{f.description}</Text>
      </Stack>
    </Surface>
  ))}
</Grid>

Step Grid

Grid
Surface
Stack
Badge
Heading
Text

Numbered steps in a grid layout with badges and content

<Grid cols="3" gap="lg">
  {steps.map((s, i) => (
    <Surface key={i} tone="muted" radius="xl" border className="p-6">
      <Stack spacing="sm">
        <Badge variant="outline">{String(i + 1).padStart(2, '0')}</Badge>
        <Heading as="h3" size="m">{s.title}</Heading>
        <Text variant="muted">{s.body}</Text>
      </Stack>
    </Surface>
  ))}
</Grid>