Grid

Examples

Schema

import type { SchemaNode } from '@object-ui/types';

type ColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

interface GridSchema {
  type: 'grid';
  columns?: ColumnCount | Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', ColumnCount>>;  // default: 2
  gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;  // default: 4
  children: SchemaNode[];
  className?: string;
}

columns is a column count from 1 to 12, or an object of such counts keyed by breakpoint ({ "xs": 1, "md": 2, "lg": 4 }). Those twelve counts are the ones the renderer maps to a column class, at every breakpoint, so they are the only values validation accepts: "columns": 13, "columns": 0 or "columns": { "md": 13 } is refused with the set named (objectui#11491). Such a count used to draw no column class where it was authored: 13 lost its md count, and 0 drew two columns. A bare count above 1 is one column on a phone and that count from md up; an object keeps full control of every breakpoint.

The object is the only way to set a count per breakpoint. The flat smColumns, mdColumns, lgColumns and xlColumns keys are retired and refused by name (objectui#11505): write the count as that breakpoint's member, so "columns": 1, "mdColumns": 2 becomes "columns": { "xs": 1, "md": 2 }.

gap is a step on the grid's spacing scale, and 0 means none. The ten steps are the ones the renderer maps to a gap class, so they are the only values validation accepts: "gap": 9 or "gap": 16 is refused with the set named (objectui#11474). For such a number the renderer used to build a gap class at runtime that no compiled stylesheet defines, so the grid rendered with no gap at all.