Expandable Tile Grid Gallery Block for React

Twelve plants plus a legend cell fill four rows of four (five rows of three on a phone). Open, the big plant takes four cells, so three plants' worth of room has to come from somewhere: the legend gives up all but one cell on desktop, or all of it on a phone, and the grid still fills the same rows. The open tile is placed by its own position in reading order, pushed in so a two-by-two always fits.

No. The DOM order never changes, only the grid placement, so a screen reader and the Tab order follow the same list. Each plant is a button with aria-pressed, and a polite line says which plant is open.

Tab visits the plants, Enter or Space grows or restores one, and Escape restores the open one while focus is inside the block. Put it back is a normal button.

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change.

No. The names, prices and care notes are example data typed in each entry.

Three columns by five rows of portrait tiles, with names under the pictures. The open plant takes two columns and two rows; the legend is hidden while it is open, so the grid is still fifteen cells.