Matrix

Uniform grid utility with equal item alignment per row

Accessibility

Semantics

  • Matrix is purely a layout utility – it doesn’t add semantic meaning.
  • Wrap items in appropriate semantic containers (e.g., <article>, <li>, <section>).

Reading Order

  • DOM order determines reading flow; ensure logical order matches expected scan order.

Keyboard Support

  • Matrix itself is not interactive. Interactive child elements must remain focusable and in logical sequence.

Responsiveness

  • Ensure Matrix layouts collapse gracefully on small screens, without cutting off or hiding content.

Consistency

  • Maintain equal heights across rows for visual clarity, but ensure text and content remain legible and not truncated.