This masonry grid uses Pretext to compute exact card heights without DOM measurement, enabling perfect positioning with zero layout reflow. Cards are virtualized: only visible cards exist in the DOM.
Every card's text content is real DOM text, fully accessible to screen readers, find-in-page, and browser translation. The absolute positioning is purely visual; the reading order follows the natural card sequence. A screen-reader-only heading provides page context.
A screen-reader-only <ul> list contains all card texts in reading
order, separate from the visually-positioned cards. The visual card container is
marked aria-hidden so assistive technologies read the clean semantic
list instead. Without JavaScript, a <noscript> message explains
that the demo requires JS to render, ensuring text browsers and crawlers see a
meaningful page rather than empty markup.