Masonry Layout Decision

The problem is that the content flows from top to bottom using a masonry layout. The visual reading flow, as well as the tab order, are supposed to be left to right order.

We need a method that will ensure that users can read things in their proper comprehension order and that tab order matches visual order.

But if we want to use it:

We must re-order the array before outputting it to DOM and pass the index to the individual card to get the even cards. After getting the even cards, we can change the height for them.

The issue with this:

Accessibility after this will still be an issue. The content flow will be from left to right, but the tab flow will be from top to bottom.

For masonry js library by desandro:

• Getting reference error while accessing the document object. (try importing the library in useEffect)
• To use this js library, we have to use document.querySelector to fetch the class of the layout of the card, and the document is part of the DOM API, so it is available on the browsers.