Grid

Ported

A responsive grid with preset column layouts, such as a row of stat tiles that stacks on a narrow window, or a main column beside a side column. Any element is an item; the app needs no item part.

Kumo source

Open roles14

In loop37

import { StatTile } from "@etched/monet/stat-tile";
import { Grid } from "@etched/monet/grid";

export function Preview() {
  return (
    <Grid variant="side-by-side" gap="sm" style={{ inlineSize: "100%" }}>
      <StatTile label="Open roles" value="14" />
      <StatTile label="In loop" value="37" />
    </Grid>
  );
}

Installation

import { Grid } from "@etched/monet/grid";

Examples

Columns

4up stacks on a narrow window, then shows 2, 3 and 4 columns as the window widens. With mobileDivider, a line separates the stacked tiles.

Open roles143 opened this month

In loop3712 onsite this week

Offers out52 waiting over a week

Hired this quarter9of a plan of 12

import { StatTile } from "@etched/monet/stat-tile";
import { Grid } from "@etched/monet/grid";

export function Columns() {
  return (
    <Grid variant="4up" mobileDivider>
      <StatTile label="Open roles" value="14" detail="3 opened this month" />
      <StatTile label="In loop" value="37" detail="12 onsite this week" />
      <StatTile label="Offers out" value="5" detail="2 waiting over a week" />
      <StatTile label="Hired this quarter" value="9" detail="of a plan of 12" />
    </Grid>
  );
}

Main and side

2-1 puts a main column beside a side column a third as wide, from 48 rem; 1-2 is the other way round.

Interview notes

Walked through a timing closure on a 5 nm block without notes. Asked good questions about bring-up.

Owner

Sam Lee

import { LayerCard } from "@etched/monet/layer-card";
import { Text } from "@etched/monet/text";
import { Grid } from "@etched/monet/grid";

export function MainAndSide() {
  return (
    <Grid variant="2-1" gap="sm">
      <LayerCard title="Interview notes" titleAs="h4">
        <Text as="p">Walked through a timing closure on a 5 nm block without notes. Asked good questions about bring-up.</Text>
      </LayerCard>
      <LayerCard title="Owner" titleAs="h4">
        <Text as="p">Sam Lee</Text>
      </LayerCard>
    </Grid>
  );
}

Six up

Small items, such as counts per stage: 2 columns on a narrow window, up to 6 on a wide one.

To Do48

Activating21

Scheduling9

Interviewing37

Offer5

Hired9

import { StatTile } from "@etched/monet/stat-tile";
import { Grid } from "@etched/monet/grid";

export function SixUp() {
  return (
    <Grid variant="6up" gap="sm">
      {[
        ["To Do", "48"],
        ["Activating", "21"],
        ["Scheduling", "9"],
        ["Interviewing", "37"],
        ["Offer", "5"],
        ["Hired", "9"],
      ].map(([label, value]) => (
        <StatTile key={label} label={label} value={value} />
      ))}
    </Grid>
  );
}

Accessibility

A plain div with no role. The mobileDivider lines are borders only, so screen readers do not hear them.
The columns never reorder the items, so reading order and focus order follow the source at every window width.
Put the items in the source in the order people read them. Do not reorder them with CSS order.

API reference

Prop	Type	Default	Description
variant	"2up" \| "side-by-side" \| "2-1" \| "1-2" \| "1-3up" \| "3up" \| "4up" \| "6up" \| "1-2-4up"	–	The columns at each window width. Without it, one column.
gap	"none" \| "sm" \| "base" \| "lg"	"base"
mobileDivider	boolean	–	With `variant="4up"`: a line under each item while they stack in one column, below 48 rem.