Normal wrapper (display: block)
Item A
Item B
Wrapper with display: contents
Item C
Item D
Safe use of display: contents
The wrapper disappears, but its children still lay out normally.
Item A
Item B
Unsafe: interactive element
Buttons lose their focus box and accessibility tree position.
Unsafe: landmark element
Landmarks like <nav> vanish from the accessibility tree.
Unsafe: ARIA role or label
ARIA roles break because the element no longer generates a box.
This region becomes inaccessible.
Subgrid Example
The child grid inherits the parent's column structure.
Parent Col 1
Parent Col 2
Parent Col 3
Child aligns to Col 1
Child aligns to Col 2
Child aligns to Col 3