Grid

Role and semantics

By default Grid and Grid.Item are plain <div> elements with no role; they carry no table or grid role. For a card list, use render={<ul />} and render={<li />}. For tabular data, use a real table.

Keyboard

Key	Behaviour
Tab	Grid takes no focus; Tab moves through the children in their own order. Grid has no keys of its own.

Focus

None. Grid is not in the tab order and draws no focus ring. Focus order is DOM order; there is no prop that changes the visual order.

Screen reader output

Grid says nothing to a screen reader; the text of the cells is read in DOM order. The column and row layout is not read. Rendered as <ul> and <li>, the screen reader announces the list and the number of items.

Example	Read as
<Grid columns={2}><Grid.Item>First item</Grid.Item><Grid.Item>Second item</Grid.Item></Grid>	“First item”, “Second item”
<Grid render={<ul />}><Grid.Item render={<li />}>First item</Grid.Item>...</Grid>	“List, 2 items”, “First item”, … (varies by screen reader)

Contrast

Grid carries no colour; contrast depends on the components inside the cells and the surface they sit on.

WCAG 2.2

Criterion	How Grid meets it	What product teams do
1.3.1 Info and relationships	List meaning comes only from the element passed with render; Grid does not produce table meaning.	Use a table for data and <ul> with <li> for card lists.
1.3.2 Meaningful sequence	Grid places children row by row in DOM order and does not change the order.	Write the cells in the order they should be read.
1.4.10 Reflow	Below 1024 px columns uses the base value; with base 1 there is a single column at 320 CSS pixels and no horizontal scrolling.	Keep base at 1 or 2; add columns with md and lg.
2.4.3 Focus order	Grid takes no focus and does not change focus order; the order is DOM order.	Do not add tabIndex to a Grid or Grid.Item.