Grid
A quiet structure behind a section: a faint square grid, or a fine point at each crossing, with a registration cross on each corner and the columns numbered and the rows lettered along the border, like a drafting sheet. It never moves.
Report an issue with GridExample
Sheet 1, rules
Space does the layout.
The construction stays on the page, faint enough to read through, so every line still knows where it stands.
Sheet 2, dots
Every word on a crossing.
A point where two lines would meet, and nothing between: the grid is there when you look for it.
Rules, cell 27
Dots, cell 27
Right to left
Install
Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base along.
npx shadcn@latest add https://Usage
import { Grid } from "@/components/ui/grid"export default function Example() {return (<div className="grid w-full gap-(--ot-space-7) lg:grid-cols-2"><Grid><p className="ot-label">Sheet 1, rules</p><p className="ot-f mt-(--ot-space-5) max-w-[9ch]">Space does the layout.</p><p className="ot-p mt-(--ot-space-5) max-w-[34ch] text-(--ot-graphite)">The construction stays on the page, faint enough to read through, so every line still knows where it stands.</p></Grid><Grid variant="dots" cell={40}><p className="ot-label">Sheet 2, dots</p><p className="ot-f mt-(--ot-space-5) max-w-[9ch]">Every word on a crossing.</p><p className="ot-p mt-(--ot-space-5) max-w-[34ch] text-(--ot-graphite)">A point where two lines would meet, and nothing between: the grid is there when you look for it.</p></Grid></div>)}Contract
- Underneath: native. A server component; it never moves.
- Anatomy:
<div class="ot-grid" data-variant="rules | dots" style="--ot-grid-cell">holding four.ot-grid-cross(data-corner="start-top | end-top | start-foot | end-foot"), two.ot-grid-ticks(data-axis="columns | rows",aria-hidden), then the content. - A quiet structure behind a section, drawn as a construction sheet. Rules (the default): a faint square grid in
--ot-rule, from "the silence that heals" and "Less is more.". Dots: the rules left out and a fine point on each crossing in--ot-rule-strong, from Paul Rand's dotted sheet. - A registration cross (two pencil hairlines,
--ot-space-3long) is centred on each corner of the box, as poster 4 marks its corners with + signs. The first row and column are the sheet's border: the columns numbered 01, 02, 03 along the top and the rows lettered A, B, C down the start edge (Rand's dimension letters), each label hugging the corner where its line begins, in--ot-pppencil tabular figures, clipped where the box ends (48 columns and 26 rows are labelled; the lines go on past them). The content has one cell of padding, so it stands on a line. cellsets the square (a number of pixels or any length,--ot-grid-cell, default--ot-space-7). Right to left, the grid, the numbers and the letters run from the right edge.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
variant | "rules" | "dots" | "rules" | rules draws faint hairlines, the construction grid the posters lay under their words. dots leaves the rules out and sets a fine point on each crossing, as a drafting sheet is dotted. |
cell | number | string | 60 (--ot-space-7) | The side of one square, in pixels or any CSS length. The first row and column are the border that carries the labels, so the content stands one cell in, on a line. |
children | ReactNode | What stands on the grid. |
Craft
Where its move comes from
| Component | Reference | Move |
|---|---|---|
| Grid | "the silence that heals" faint grid; "Less is more."; the posters' + corner signs | A faint square grid with a cross on each corner and a lettered, numbered border |
| Dots grid | Paul Rand's dotted construction grid and dimension letters | A fine point on each crossing, the rules left out |