Skip to main content

Grid

Status: No dedicated documentation exists in design-system-docs (checked main + all open PRs, verified 2026-08-19). This one has a real internal engineering doc in source — content marked "real source content" below is drawn from that file, not invented. Everything else is an explicit placeholder.

Source: DTSL/design-system → packages/primitives/Grid/ (package @dtsl/naos-primitives, exported as Grid, Column)

Real source content, from packages/primitives/Grid/_decisions/Grid Solution.md (an engineering design doc, not a UX doc — treat accordingly):

A grid is a network of rows and columns. The page is modelled as a grid to create layout regions that span across these rows and columns. The grid is composed of a grid container containing rows, columns, and nested grids. A nested grid must be created inside a column. The spacing between 2 columns is called gutter; the spacing between 2 rows is called rowGutter. Built entirely on native CSS grid properties, applied via inline styles and classes.

<Grid {...props}>
	<Column></Column>
	<Column></Column>
</Grid>

That same doc also defines breakpoints for Desktop/Large (L), Tablet/Medium (M), and Mobile/Small (S) — see the source file for the actual values, not reproduced here to avoid transcription error.

Grid.js accepts arbitrary CSS-grid-like props (converted internally via useConvertProps) rather than a fixed prop list — uses prop-types, not TypeScript. See packages/primitives/Grid/PropTypes/common-proptypes.js for the validated prop shapes (commonTemplateType, areaTemplateType, responsiveAreaTemplateType).

When to Use​

TODO — the engineering doc explains the mental model but not product/UX "when to use" guidance. Needs input from design/PM.

When NOT to Use​

TODO — needs UX/product input. Name the alternative component if one exists (e.g. Stack for one-dimensional flex layouts, or Layout's AppGrid for page-level shell layout).

Decision Logic​

TODO — needs UX/product input on Grid vs Stack vs Layout/AppGrid selection.

Accessibility​

TODO — needs UX/product input.

Common Mistakes​

TODO — needs UX/product input. (Note: nested grids must live inside a Column per the source doc — a real structural constraint worth preserving.)