Grid

Lays out its children in equal columns with spacing from the design tokens: a fixed number of columns, or as many as fit.

import { Grid } from 'jarvis-react-ui';

Fixed columns

columns takes 1 to 6 equal columns. gap uses the same steps as Stack.

import { Grid, Label, Metric, Stack } from 'jarvis-react-ui';

const READINGS = [
    { label: 'CPU', value: 42 },
    { label: 'GPU', value: 67 },
    { label: 'RAM', value: 58 },
];

export default function Columns() {
    return (
        <Grid columns={3} gap="lg" className="w-full">
            {READINGS.map((r) => (
                <Stack key={r.label} gap="xs">
                    <Label>{r.label}</Label>
                    <Metric value={r.value} unit="%" />
                </Stack>
            ))}
        </Grid>
    );
}

Auto-fit

With columns="auto" (the default) the grid fits as many columns of at least minColumnWidth pixels as the width allows, and reflows when it changes, e.g. when a window is resized. On narrower containers a column never gets wider than the container. Like any grid, it fills the width of a block container; inside a flex container (such as a row Stack) give it a width.

import { GlassCard, Grid } from 'jarvis-react-ui';

const SYSTEMS = ['Radar', 'Comms', 'Shields', 'Thrusters', 'Life support', 'Navigation'];

export default function Auto() {
    return (
        <Grid minColumnWidth={140} gap="sm" className="w-full">
            {SYSTEMS.map((name) => (
                <GlassCard key={name} title={name}>
                    nominal
                </GlassCard>
            ))}
        </Grid>
    );
}

Accessibility

Grid renders a plain <div> with display: grid and adds no semantics. The reading order is the order of the children.

API

Also accepts inherited props from HTMLAttributes (54), AriaAttributes (53), DOMAttributes (169), RefAttributes (1), Attributes (1).