Components / layout

State matrix

Anatomy

• responsive grid container
• repeating child cells

Keyboard contract

Responsive reflow preserves DOM-based focus order.

Screen-reader contract

Adds no grid role unless callers provide true two-dimensional interaction.

Content rules

• Use for peer items of comparable weight.
• Avoid masonry ordering that changes meaning.

Public API

Adaptation contracts

RTL

Logical properties and DOM order determine layout and reading order.

High contrast

Never clip descendant outlines or depend on decorative surfaces for grouping.

Reduced motion

Responsive reflow is immediate and does not animate layout geometry.

Verification IDs

Grid/responsive-order

Live

Copyable example

import { Grid } from "@awesome-ds/react";

<Grid>…</Grid>